Tutorial animații CSS: Ghid complet pentru începători

Acesta este un ghid complet de sintaxă și un tutorial interactiv de animații CSS pentru începători. Folosiți-l ca referință pentru a afla diferitele părți ale specificației animațiilor CSS.

Performanța browserului a parcurs un drum lung în ultimii 10 ani. Înainte era mult mai dificil să adăugați animații interactive pe paginile web din cauza potențialului de probleme de randare și performanță. Dar în zilele noastre, animațiile CSS pot fi folosite mult mai liber, iar sintaxa este în general mult mai ușor de învățat în comparație cu caracteristicile CSS precum grid sau flexbox.

Există diferite caracteristici care fac parte din specificația de animație CSS W3C. Unele sunt mai ușor de folosit decât altele. Acest tutorial de animații ale cadrelor cheie CSS va parcurge toată sintaxa, inclusiv fiecare dintre diferitele proprietăți. Voi include demonstrații interactive pentru a vă ajuta să înțelegeți ce este posibil cu animațiile CSS.

Sintaxa @keyframes

Fiecare animație CSS are două părți: una sau mai multe proprietăți de animation-* împreună cu un set de cadre cheie de animație care sunt definite folosind regula @keyframes at. Să aruncăm o privire în detaliu la ceea ce implică construirea unui set de reguli @keyframes .

Sintaxa arată astfel:

 @keyframes moveObject 0% transform: translateX(0); 50% transform: translateX(300px); 100% transform: translateX(300px) scale(1.5);

După cum se arată aici, regula @keyframes at include trei părți de bază:

• Regula @keyframes urmată de un nume de animație personalizat
• Un set de bretele care înfășoară toate cadrele cheie
• Unul sau mai multe cadre cheie, fiecare cu un procent urmat de un set de reguli înconjurat de acolade

În acest prim exemplu al tutorialului nostru de animații CSS, am definit animația mea cu numele moveObject . Acesta poate fi orice nume pe care îl doresc, ține seama de majuscule și minuscule și trebuie să respecte regulile de identificare personalizată din CSS. Acest nume personalizat trebuie să se potrivească cu numele folosit în proprietatea animation-name (discutată mai târziu).

În exemplul meu, veți observa că am folosit procente pentru a defini fiecare dintre cadrele cheie din animația mea. Dacă animația mea include cadre cheie care sunt egale cu 0% și 100% , pot folosi alternativ cuvintele cheie from și to :

 @keyframes moveObject from transform: translateX(0); 50% transform: translateX(300px); to transform: translateX(300px) scale(1.5);

Următorul CodePen interactiv folosește sintaxa de mai sus într-un exemplu live:

În demo, am inclus un buton care resetează animația. Voi explica mai târziu de ce este necesar. Dar, deocamdată, știți doar că această animație include trei cadre cheie care reprezintă pași din această secvență de animație: începutul, pasul de 50% și sfârșitul (adică, 0%, 50% și 100%). Fiecare dintre acestea utilizează ceea ce se numește un selector de cadre cheie împreună cu acolade pentru a defini proprietățile la acel pas.

Câteva lucruri de reținut despre sintaxa @keyframes :

• Puteți pune seturile de reguli ale cadrelor cheie în orice ordine doriți, iar browserul le va rula în continuare în ordinea determinată de procentul lor
• Puteți omite cadrele cheie 0% și 100%, iar browserul le va determina automat după stilurile existente pe elementul animat
• Dacă există cadre cheie duplicate cu seturi de reguli diferite (de exemplu, două cadre cheie pentru 20% cu o valoare de transformare diferită), browserul îl folosește pe ultimul
• Puteți defini mai multe cadre cheie într-un singur selector de cadre cheie cu o virgulă: 10%, 30% ...
• Cuvântul cheie !important anulează orice valoare a proprietății, așa că nu ar trebui să fie utilizat pe o proprietate din cadrul unui set de reguli cadru cheie

Acum că înțelegeți bine sintaxa @keyframes din acest tutorial de animație CSS, să aruncăm o privire la diferitele proprietăți de animație care sunt definite pe elementul animat.

Proprietățile animației pe care le vom acoperi:

Proprietatea animation-name

După cum am menționat, fiecare animație CSS pe care o creați trebuie să aibă un nume care apare în sintaxa @keyframes . Acest nume trebuie să fie același nume definit folosind proprietatea animation-name .

Folosind CSS-ul din demonstrația anterioară, sintaxa arată astfel:

 .box animation-name: moveObject;

Din nou, numele personalizat pe care l-am definit trebuie să existe și ca nume pentru o @keyframes at-rule - altfel acest nume nu va face nimic. Vă puteți gândi la asta ca la un apel de funcție în JavaScript. Funcția în sine ar fi porțiunea @keyframes moveObject a codului, în timp ce apelul funcției este animation-name: moveObject .

Câteva lucruri de reținut despre animation-name :

• Valoarea inițială pentru animation-name este none , ceea ce înseamnă că nu sunt active cadre cheie. Aceasta poate fi folosită ca un fel de „comutație” pentru a dezactiva o animație.
• Numele ales de tine face distincție între majuscule și minuscule și poate include litere, cifre, liniuțe de subliniere și cratime.
• Primul caracter din nume trebuie să fie o literă sau o cratimă, dar doar o singură cratimă.
• Numele nu poate fi un cuvânt rezervat, cum ar fi unset , initial , sau inherit .

Proprietatea animație-durată

Proprietatea animation-duration , fără surpriză, definește timpul necesar unei animații pentru a rula o dată de la început până la sfârșit. Această valoare poate fi specificată în secunde sau milisecunde, după cum se arată mai jos:

 .box animation-duration: 2s;

Cele de mai sus ar fi echivalente cu următoarele:

 .box animation-duration: 2000ms;

Puteți vedea proprietatea animation-duration în acțiune în următoarea demonstrație CodePen. În această demonstrație, puteți alege cât timp doriți să dureze animația. Încercați să introduceți diferite valori fie în secunde, fie în milisecunde, apoi utilizați butonul „Animați caseta” pentru a rula animația.

Dacă utilizați un număr mic împreună cu ms pentru unitate, este posibil să nu observați nicio mișcare. Încercați să setați un număr mai mare dacă utilizați milisecunde.

Câteva note despre folosirea animation-duration :

• Valorile negative sunt nevalide
• Unitatea trebuie inclusă, chiar dacă durata este setată la 0s (valoarea inițială)
• Puteți utiliza valori fracționale (de exemplu, 0.8s )

Proprietatea animation-timing-function

Funcția animation-timing-function , care nu este la fel de evidentă în sensul său ca cele două proprietăți anterioare, este folosită pentru a defini modul în care animația CSS progresează. S-ar putea să nu fie cea mai clară explicație, dar sintaxa ar putea ajuta la clarificare.

Declarația arată astfel:

 .box animation-timing-function: linear;

Această proprietate acceptă următoarele valori ale cuvintelor cheie:

• ease (valoarea inițială)
• ease-in
• ease-out
• ease-in-out
• linear
• step-start
• step-end

Cele mai multe dintre valori sunt relativ ușor de înțeles după numele lor, dar puteți vedea cum diferă folosind următoarea demonstrație interactivă:

Utilizați intrarea de selectare pentru a alege una dintre cele șapte valori ale cuvintelor cheie. Rețineți că valorile ease-* „ușurează” animația în diferite moduri. O valoare liniară este consecventă pe tot parcursul.

Proprietatea animation-timing-function acceptă și următoarele funcții:

• cubic-bezier() – Acceptă ca argumente patru valori numerice, separate prin virgulă
• steps() – Acceptă ca argumente două valori, un număr și un „termen de salt”, separate prin virgulă

Valorile cuvintelor cheie step-start și step-end sunt echivalente cu valorile steps(1, jump-start) și, respectiv, steps(1, jump-end) .

În ceea ce privește cubic-bezier() , următoarea demonstrație interactivă vă poate ajuta să înțelegeți puțin mai bine funcția:

Observați că demonstrația vă permite să setați cele patru argumente în funcția cubic-bezier() . Două dintre argumente pot fi negative și două sunt limitate la valori zecimale între 0 și 1. Pentru o explicație decentă a modului în care funcționează aceste tipuri de funcții de sincronizare, puteți consulta acest articol sau acest instrument interactiv.

Funcția steps() , pe de altă parte, acceptă două argumente:

• Un număr întreg care reprezintă „opriri” egale de-a lungul unui singur ciclu al animației.
• Un cuvânt cheie opțional numit „jumpterm” care determină dacă animația „se menține” la intervale specifice

Din nou, o demonstrație interactivă ar trebui să vă ajute să înțelegeți cum funcționează aceste jumpterms:

Încercați să selectați un număr întreg împreună cu un jumpterm (sau încercați-l fără jumpterm) pentru a vedea cum diferă diferitele cuvinte cheie cu diferite valori întregi. Aparent, sunt permise numere întregi negative, dar nu văd nicio diferență între 0 și orice valoare negativă.

Proprietatea animation-iteration-count

În unele cazuri, veți fi fericit dacă o animație rulează o dată, dar uneori doriți ca o animație să ruleze de mai multe ori. Proprietatea animation-iteration-count vă permite să faceți acest lucru acceptând un număr pozitiv reprezentând de câte ori doriți să ruleze animația:

 .box animation-iteration-count: 3;

Valoarea inițială pentru animation-iteration-count este 1 , dar puteți folosi și cuvântul cheie infinite (se explică de la sine) sau puteți utiliza o valoare fracțională. O valoare fracțională va rula animația parțial pe parcursul fracțional:

 .box animation-iteration-count: 3.5;

Codul de mai sus rulează prin animație de trei ori și jumătate. Adică, trei iterații complete urmate de o iterație finală care se oprește exact la jumătatea drumului.

Această proprietate este cea mai utilă atunci când este utilizată împreună cu proprietatea animation-direction (discută în continuare), deoarece o animație care rulează doar de la început nu este extrem de utilă dacă rulează de mai multe ori.

Puteți încerca demonstrația de mai jos, care vă permite să selectați o valoare fracțională pentru numărul de iterații, astfel încât să puteți vedea efectul:

Proprietatea animație-direcție

După cum sa menționat mai sus în acest tutorial de animații CSS, proprietatea animation-direction funcționează frumos împreună cu animation-iteration-count . Proprietatea animation-direction vă permite să definiți direcția în care doriți să fie redată animația. Sintaxa arată astfel:

 .box animation-direction: alternate;

Puteți seta valoarea ca unul dintre cele patru cuvinte cheie:

• normal – Animația este redată înainte la prima iterație (implicit)
• reverse – Animația este redată înapoi la prima iterație
• alternate – Animația este redată înainte la prima iterație, apoi se alternează la iterațiile ulterioare
• alternate-reverse – La fel ca alternate , dar se redă înapoi la prima iterație

Puteți încerca diferitele valori cu un număr diferit de iterații folosind demonstrația interactivă de mai jos:

Proprietatea animație-play-state

Proprietatea animation-play-state nu este extrem de utilă într-un mediu CSS static, dar poate fi utilă atunci când scrieți animații care sunt interactive prin JavaScript sau chiar CSS.

Această proprietate acceptă două valori: running sau paused :

 .box animation-direction: paused;

În mod implicit, orice animație dată este în starea „în rulare”. Dar puteți folosi JavaScript pentru a comuta valoarea proprietății. Puteți chiar să utilizați în mod fezabil o caracteristică CSS interactivă precum :hover sau :focus pentru a schimba animația într-o stare „în pauză”, care în esență îngheață animația oriunde se află în iterația curentă.

Demo-ul interactiv de mai jos are o animație care rulează la infinit, cu două butoane pentru „pauză” și „relua” animația.

Proprietatea animație-întârziere

Unele animații sunt concepute pentru a începe animarea imediat, în timp ce altele ar putea beneficia de o ușoară întârziere înainte de prima iterație. Proprietatea animation-delay vă permite să realizați acest lucru.

 .box animation-delay: 4s;

Ca și alte valori bazate pe timp, puteți seta animation-delay la o valoare folosind secunde sau milisecunde. De asemenea, puteți utiliza valori fracționale.

Este important de reținut că întârzierea apare numai la prima iterație, nu la fiecare iterație. Puteți încerca acest lucru folosind demonstrația interactivă de mai jos:

Demo-ul vă oferă opțiunea de a modifica valoarea iterației, precum și întârzierea, astfel încât să puteți vedea că întârzierea nu afectează nicio iterație ulterioară - doar prima.

Un mod interesant de utilizare a acestei proprietăți este cu o valoare negativă. De exemplu, folosind demonstrația de mai sus, încercați să setați animation-delay la -0.5s . Veți observa că întârzierea negativă funcționează aproape ca înainte într-o mașină a timpului - animația începe mai degrabă decât la început.

Proprietatea animation-fill-mode

Proprietatea finală pe care o voi acoperi în acest tutorial de animații CSS este una pe care am folosit-o în demonstrația anterioară. Veți observa că atunci când animația oprește iterația finală, caseta rămâne acolo unde este. Acest lucru se realizează folosind animation-fill-mode .

 .box animation-fill-mode: forwards;

Această proprietate stabilește modul în care o animație aplică stiluri elementului vizat înainte și după execuția sa. Este puțin greu de înțeles conceptual, așa că voi acoperi semnificația fiecărei valori; apoi puteți compara valorile folosind demonstrația interactivă.

Această proprietate acceptă următoarele patru valori ale cuvintelor cheie:

• none – Valoarea implicită, fără stiluri aplicate înainte sau după execuție
• forwards – Păstrează toate stilurile aplicate în ultimul cadru cheie al animației
• backwards – Mai mult sau mai puțin invers față de valoarea anterioară, reține stilurile aplicate animației de îndată ce începe execuția, dar înainte ca animația să înceapă
• both – Păstrează stilurile atât pentru forwards , cât și pentru backwards

Demo-ul final din acest tutorial de animații CSS va face lucrurile puțin mai clare, dar acesta ar putea dura mult timp înainte de a înțelege cu adevărat ceea ce face și cum îl realizează.

Pentru comoditate, am adăugat toate demonstrațiile într-o singură colecție CodePen.

Veți observa că demonstrația vă permite să ajustați modul de umplere, întârzierea, direcția și numărul de iterații, deoarece toate acestea pot avea un efect asupra aspectului. Am adăugat, de asemenea, o culoare de fundal diferită casetei animate din primul cadru cheie, ceea ce ajută din nou la a face valorile modului de umplere puțin mai clare. Dacă încă nu înțelegeți cum funcționează animation-fill-mode , puteți consulta un articol mai vechi pe care l-am scris, care discută în profunzime animation-fill-mode .

Proprietatea stenografia animației

Am acoperit opt ​​proprietăți diferite în acest tutorial de animație CSS pentru începători și vă încurajez să utilizați mâna lungă. Acest lucru vă va face mai ușor să vedeți valorile explicite setate.

Odată ce ați înțeles bine fiecare dintre proprietăți, aveți opțiunea de a utiliza proprietatea scurtă de animation , care vă permite să definiți toate proprietățile de mână lungă într-o singură declarație.

 .box animation: moveObject 2s ease-in-out 3 reverse running 1.3s forwards;

Sincer, este o mulțime de informații într-o singură linie. Aș recomanda utilizarea prescurtației dacă declarația nu include toate proprietățile, dar poate doar trei sau patru dintre ele.

Dacă folosiți prescurtarea, puteți pune valorile în orice ordine doriți, dar rețineți următoarele reguli:

• Prima valoare care definește timpul este animation-duration ; orice valoare de timp ulterioară este animation-delay .
• Dacă există un conflict între un cuvânt cheie și animation-name , valoarea cuvântului cheie va avea prioritate dacă apare prima.
• Orice valoare omisă va reveni la starea lor inițială, ca și în cazul oricărei proprietăți scurte CSS.

Aplicarea mai multor animații unui singur element

O ultimă caracteristică de care este bine să fii conștient este că aveți opțiunea de a aplica mai multe animații unui singur obiect, separând animațiile prin virgulă.

Iată un exemplu folosind prescurtarea:

 .box animation: moveObject 2s ease-in-out, fadeBox 3s linear;

Aici, am definit două animații diferite care s-ar mapa la două seturi diferite de cadre cheie, dar s-ar aplica aceluiași obiect. Același cod ar putea fi scris cu mâna lungă ca:

 .box animation-name: moveObject, fadeBox; animation-duation: 2s, 3s; animation-timing-function: ease-in-out, linear;

Observați cum fiecare proprietate include două valori separate prin virgulă. În acest caz, stenografia ar fi aproape cu siguranță mai ușor de citit și de întreținut.

Încheierea acestui tutorial de animații CSS

Un ultim avertisment: utilizați animația cu moderație și amintiți-vă că unii utilizatori de web ar putea fi afectați negativ de culorile intermitente și de alte obiecte care se mișcă rapid.