@keyframes
keyframes CSS vă permite să schimbați în mod constant și în mod automat, și nu doar ca răspuns la evenimentele mouse-ului, atât în tranziție. Utilizarea cadrelor cheie pot fi schimbate pentru un anumit selector CSS în orice moment al schimbării de stat sau a unui eveniment definit de JQuery (cum ar fi derularea). Această regulă este utilizat în conjuncție cu caracteristica de animație, cu care puteți seta durata, calendarul funcție, întârzierea și direcția. Proprietăți, cum ar fi de transformare, în cazul în care acestea sunt incluse în animație, a declarat în interiorul @keyframes reguli.
Pentru a începe fiecare @keyframe regulă trebuie să aibă un nume unic:
Acest nume este folosit pentru elemente de stil în proprietatea de animație:
Cadrele cheie sunt stabilite reguli, exprimată ca procent. Procentajele sunt puncte de-a lungul liniei de timp de animație, care este stabilit în interiorul stiluri pentru redare pe elementul:
În acest exemplu, elementul cu clasa elementul div își schimbă culoarea de la roz la galben și în cele din urmă la albastru. În cazul în care doar două puncte, puteți utiliza de la și la:
Un exemplu de aplicare a acestei reguli simplu pentru a schimba culoarea de fundal pentru organism:
animație proprietate
În sine @keyframes fără instrucțiuni care definesc durata, funcția de timp și direcția nu face nimic. Toate aceste instrucțiuni nu funcționează în același mod ca și în proprietate de tranziție. Toate aceste sub-proprietăți pot fi setate într-o singură proprietate de animație, folosind următoarea sintaxă:
Sau pot fi setate separat prin adăugarea animației cuvântul înainte de fiecare sub-proprietăți:
... ei bine, înțelegi.
Nu toate sunt necesare subproprietăți, dar acestea trebuie să fie scrise în ordinea corectă, astfel încât browser-ul poate aplica în mod corespunzător valoarea de sincronizare și numele distinctiv al animației la alte cuvinte cheie. Scurtă descriere a sub-proprietăți, pe care le avea nevoie de:
durata - durata de seturi de animație de la început până la sfârșit;
calendarul-funcție - specifică modul în care animația de mișcare de-a lungul timpului o „piesă“, de exemplu, ușurința, ușurința în, liniar, etc;
întârziere - timpul de întârziere (dacă este cazul) începe de animație;
iteratie-count - de câte ori pentru a reda animația la bucla, puteți utiliza valoarea infinită.
În plus față de deja familiar pentru noi valori (din cauza tranziției de proprietate) de animație are, de asemenea, direcția, iterație-count, joaca-stat si umple-mode.
Numărul de iterații
În mod implicit, animația se execută un ciclu și se termină. Proprietatea valorii de animație-iterație-count poate fi specificat ca un număr, adică, de câte ori animația ar trebui să înceapă. De asemenea, pentru ciclism, puteți utiliza cuvântul cheie infinit.
DIRECTIA
Subproperty animație direcție definește o direcție nu animație vizuală (poziția, starea inițială și finală sunt stabilite în stiluri) și indică cadrele cheie ordine de pornire. Subproperty ia valori normale, inversa, alternativ, și alternativ- inversă.
Înțeles animație normală joacă de la început până la sfârșit. Înțeles pierde animație inversa pe dimpotrivă, de jos în sus, de la 100% la 0%.
Valoare alternativă pierde animație în primul rând înainte, apoi înapoi. Valoarea alternativ- inversă, mai întâi înapoi, apoi înainte.
UMPLEREA MODE
Subproperty animație-fill-mode specifică dacă stiluri înainte sau după redarea animației vizibile.
În mod implicit (normal) stiluri în keyframe nu afectează elementul înainte sau după animație. Umple mod este convenabil pentru a pune, dacă doriți să înghețe starea finală a elementului de animație, atâta timp cât nu se întâmplă ceva, sau pentru a fixa o revenire dramatică la starea primară (ca în demo-ul nostru cu o culoare de fundal de mai sus). Descrierea fiecărei valori:
în spate - aplicați stiluri primul cadru cheie (0%) pentru a reda animații și setări de întârziere;
forward - ultimele stiluri ale cadrelor cheie (100%) raman active dupa ce a jucat animație;
atât - regulile de lucru pentru atât în spate cât și pentru înainte.
Mai jos, voi arăta cum să utilizați modul de umplere pentru a evita o clipire ascuțită.
SITUAȚIA ACTUALĂ
Situația actuală poate fi setat Întreruptă și să fie difuzate. Una dintre aplicațiile utile play-stat - este de a seta animația pentru a întrerupe atunci când mouse-ul. Dacă te duci înapoi la primul demo și pentru a muta cursorul pe o linie în mișcare, se va opri.
Ai putea folosi de animație: întrerupte; sau animație-play-stat: se opri, dar pentru a suprascrie valoarea anterioară prin schimbarea stării este mai bine să se utilizeze sub-proprietate specială.
Crearea unui efect declanșator atunci când treceți peste imaginea cu ajutorul animației și @keyframes
Acest exemplu demonstrează efectul „declanșator“ atunci când imaginea cursorului în galerie. Spre deosebire de simplu Hover efect folosind CSS, această animație de tranziție folosind keyframes pentru a schimba treptat transparența pseudo, redimensiona, și șterge filtru CSS3 cu nuanțe de gri, care se adaugă la toate imaginile.
CSS Important pentru container imagine și pseudo, care se află pe partea de sus a acesteia:
Rețineți că filtrul sunt instalate elemente și opacitate. Aceste proprietăți sunt setate la valorile implicite înainte de declanșarea animații.
Acum tseplyamem proprietate de animație la un eveniment care ar trebui să declanșeze animație. Cel mai simplu mod - de a utiliza o: Hover. Puteți defini, de asemenea, o clasă specială de evenimente definite folosind JQuery.
Mucegaiul atașat prima animație cadru cheie cu funcție de timp ușurință în-afară și o durată de 0,75 secunde, apoi prin valori de animație-umplere-înapoi înainte modei stilul original. Deci, efectul nostru nu sari la efectul de nuanțe de gri. Al doilea cerc animație keyframe atașat la durata de 0,75 secunde.
Bloom animație vom elimina treptat Tonuri de gri filtru montat pe elementul de figură (0.8-0). După finalizarea animației folosind modul de umplere se menține la 0. Dacă nu specificați această proprietate, imaginea sare la starea inițială.
În al doilea animație cerc vom schimba transparența jumătate la unu, schimbarea de culoare de la galben la roz, apoi extindeți elementul și pentru a reduce opacitatea la 0.
Aceasta este baza pentru a crea un simplu efect de „impuls“ sau de declanșare. Vă rugăm să rețineți că este separată de transparență RGBA și se utilizează proprietatea de opacitate!
Instrumente finite
Odată ce ați învăța elementele de bază ale animației CSS, veți găsi că posibilitățile sunt nelimitate. Există încă multe mare bibliotecă și instrumente pe care le puteți utiliza pentru a crea rapid animații CSS. Cele mai bune instrumente:
ANIMATE.CSS
Intr-un articol anterior, am arătat cum să utilizați flexbox a crea un aspect este împărțit în două părți, precum și modul de utilizare a bibliotecii animate.css anima deschiderea de pagini cu conținut și imagini. În Animate.css are mai multe animații încorporate care pot fi vizualizate și inserați în proiectul dumneavoastră cu o singură clasă. În plus, biblioteca învață aplicarea și înlăturarea claselor elementelor folosind JQuery. Citiți acest articol pentru a afla cum de a lega animație la evenimente, cum ar fi un clic sau pentru a defila.
CUBIC TOOL BEZIER
cubic-bezier.com oferă interfață vizuală uimitoare pentru a crea propriile funcții Bezier cubice temporare. Rezultatul este vizibil în timp real. Codul poate fi copiat direct în stilurile lor.
CSS ANIMATE
Serviciul CSS instrument Animare web vă permite să generați blocuri de înaltă calitate animații ale cadrelor cheie. Cu acesta, puteți sări rapid la termene complexe. Dacă sunteți familiarizat cu Flash, totul pare. Pur și simplu faceți clic pe cronologie, trageți elementul în poziția dorită, setați proprietățile de animație și se repetă pentru noi piețe de desfacere. Pierde codul pentru verificare, după care poate fi copiat.
Revizie: Echipa webformyself.
Cele mai multe știri IT si dezvoltare web pe canalul nostru-Telegram
