Animaţia de bază CSS

Animaţiile CSS par foarte complexe, dar au bază ingrediente ale animaţiei care sunt simple.
Pentru a realiza o mişcare este nevoie de un nume, de cadre cheie şi de indicaţii care să indice
direcţia de deplasare.

Să începem cu ingredientele de bază necesare pentru a crea o animaţie în CSS. Sunt două tipuri
principale în orice animaţie CSS:
1. Definirea animaţiei.
2. Atribuirea acesteia unui element (unor elemente) specific(e) HTML.
Aceste două etape se pot face în orice ordine.

Regula @keyframes
Pentru a defini animaţia CSS, trebuie definite cadrele cheie folosind regula @keyframes. De
asemenea, animaţia trebuie să poarte un nume care va fi folosit ulterior.
De exemplu, la crearea unei animaţii pentru a muta o maşină pe ecran, animaţia poate fi
numită "drive'' (conducere), iar regula @keyframes poate începe astfel:
@keyframes drive { }
Ce este un cadru cheie?
Prin cadre cheie se înţelege o listă care descrie ce se petrece (ce proprietăţi trebuie modificate,
cum şi când) de-a lungul animaţiei.
Fiecare trecere prin lista de acţiuni este considerată o iterare a animaţiei. Orice proprietate
care poate fi animată şi va fi afişată într-un ciclu al animaţiei trebuie să se afle în lista cu cadre
cheie. O listă de proprietăţi care pot fi animate se află pe siteul Mozilla Developer Network.
În animaţia tradiţională, cadrele cheie sunt desenate în puncte cheie din animaţie. Cadrele
cheie CSS funcţionează astfel: se specifică valorile pentru proprietăţile animaţiei la diferite
puncte din animaţie cu cadre cheie, iar browserul construieşte animaţia dintre cadrele cheie, la fel
ca în programele After Effects sau Flash.

Definirea cadrelor cheie

O animaţie nu înseamnă nimic fără cadre cheie! Definirea cadrelor cheie se poate realiza în
declaraţia @keyframes prin două moduri: cu cuvinte cheie de la şi până la; sau folosind procente.
O animaţie foarte simplă poate muta un obiect dintr-un loc în altul. În aceste cazuri, cuvintele
cheie de la (from) şi până la (to) sunt suficiente pentru a defini cadrele cheie.
Pentru a aplica această animaţie simplă, se poate muta maşina din poziţia curentă (o translaţie
de la X=0) la o poziţie cu 400px la dreapta pentru a parcurge ecranul:
@keyframes drive {
from {transform: translateX(O);} to {transform: translateX(400px);}
}
În multe cazuri, se doreşte o animaţie cu mai multe etape, iar definirea cadrelor cheie cu procente
poate fi mai potrivită.
Pentru a defini cadrele cheie cu procente, animaţia începe de la cadrul cheie cu 0% şi se
termină la 100%. Orice număr dintre 0% şi 100% este corect, deci la lucrul cu procente
flexibilitatea este mai mare. Se pot amesteca cadrele cheie din acelaşi bloc @keyframes.
Scrierea codului pentru animaţie folosind procente:
 @keyframes drive {
0% {transform: translateX(0);}
100% {transform: translateX(400px);}
}
Aici cuvântul cheie from este echivalent cu valoarea 0%, iar to este echivalentul valorii 100%.
Dacă nu se includ cadrele cheie 0% sau 100% în listă, stilurile existente pe elementul animat
vor fi folosite în locul lor. La fel, procentele nu trebuie listate strict în ordine ascendentă. Un
cadru cheie 0% este considerat primul cadru cheie al animaţiei chiar dacă nu se află în ordine.
Acest lucru dă flexibilitate pentru a grupa cadrele cheie într-un mod care permite revenirea şi
citirea codului mai târziu.

Atribuirea animaţiei unui element HTML

Odată ce a fost creat blocul cu declaraţii de cadre cheie, animaţia poate fi atribuită unui element
sau mai multor elemente HTML.
Pentru atribuire, este nevoie de o listă de proprietăţi necesare pentru a defini elementul HTML –
în acest caz o imagine – pentru a aplica animaţia creată.
Prima proprietate este numele animaţiei care indică imaginii care set de cadre cheie vor fi
preluate:
animation-name: drive;
A doua proprietate este durata animaţiei. Cadrele cheie definesc ce se va schimba de-a lungul
animaţiei, dar nu s-a indicat cât va dura animaţia – aici două secunde:
animation-duration: 2s;
Valoarea implicită pentru durata animaţiei este zero, dar trebuie setată la altă valoare pentru a
vedea animaţia. Animaţia se poate face în secunde (s) sau milisecunde (ms).
Cu aceste două proprietăţi şi cadrele cheie definite, animaţia are loc.

---- Aici se poate previzualiza exemplul pe codepen, sau aici se poate vedea rezultatul lui. ----

Întregul cod CSS arată astfel:

.car {
animation-name: drive; animation-duration:1s;
} @keyframes drive {
from {transform: translate(0);} to {transform: translate(400px);}
}
Aici s-a setat minimum necesar pentru a realiza o animaţie CSS: un set definit de cadre cheie
pentru animaţie; un nume pentru animaţie atribuit unui element DOM; şi o durată declarată
pentru animaţie.

Încă ceva...
Există două proprietăţi suplimentare care trebuie definite explicit pentru toate animaţiile. Sunt
rare cazurile când se scrie o animaţie, după care nu se mai modifică deloc. Din acest motiv, este
utilă definirea explicită a unei proprietăţi pentru timp animation-timing-function şi una pentru
numărare animation-iteration-count a fiecărei animaţii create.
animation-timing-function
Proprietatea animation-timing-function are o valoare implicită pentru mişcarea lină (ease). Dar se
poate seta şi o valoare explicită pentru a avea un alt impact asupra animaţiei. (Detalii în capitolul
3). Pentru acest exemplu, se poate seta funcţia la ease-in:
animation-timing-function: ease-in;
animation-iteration-count
Proprietatea animation-iteration-count este utilă chiar dacă se foloseşte valoarea implicită.
Această proprietate determină de câte ori se va repeta animaţia şi valoarea implicită este unu.
animation-iteration-count: 1;
Cu aceste adăugiri, codul CSS arată astfel:
.car {
animation-name: drive; animation-duration: 2s; animation-timing-function: ease-in;
animation-iteration-count: 1;
} @keyframes drive {
from {transform: translate(0);} to {transform: translate(400px);}
}
Rezultatul final arata ca aici. Destul de bine pentru o animatie simplă!

Explorarea proprietăţilor pentru animaţie

Până acum s-au prezentat proprietăţile de bază ale animaţiei CSS. Însă sunt şi alte aspecte ale
animaţiei asupra cărora este nevoie de ami mult control, atunci când se doreşte modificarea
mişcării mai rapid.
Se pot adăuga proprietăţi suplimentare care oferă un control mai precis şi face animaţia CSS mai
cizelată.
Aici este prezentat modul în care pot fi folosite proprietăţile animation- delay, animation-fill-
mode şi animation-direction. Se va folosi o animaţie complexă a rostogolirii unei mingi. A fost
creată o animaţie care mută o minge de la stânga la dreapta în câteva cadre cheie pentru a
demonstra modul în care pot fi adăugate proprietăţile suplimentare.
---- Aici se afla animatia de inceput si aici codul de pe codepen. ----
Codul CSS pentru exemplul iniţial arată astfel:
.ball {
animation-name: ballmove; animation-duration: 2s; animation-timing-function: ease-in-
out; animation-iteration-count: 1;
}
@keyframes ballmove {
0% {transform: translateX(100px) rotate(0);}
20% {transform: translateX(-10px) rotate(-0.5turn);}
100% {transform: translateX(450px) rotate(2turn);}
}
animation-delay
În exemplul iniţial, animaţia începe chiar de la încărcarea paginii. Pentru ca animaţia să înceapă
mai târziu. Se poate adăuga proprietatea animation-delay. Ca şi la animation-duration,
proprietatea animation-delay acceptă valori în secunde (s) şi milisecunde (ms). Pentru două
secunde, codul arată astfel:
animation-delay: 2s;
---- Exemplul, acum cu delay si codul de pe codepen. ----
Animaţia începe după două secunde. După terminarea animaţiei, mingea revine la poziţia
iniţială. Pentru ca obiectul să rămână la poziţia finală, se foloseşte proprietatea animation-fill-
mode.
 animation-fill-mode
Proprietatea animation-fill-mode poate avea patru valori: none; backwards; forwards; both.
Valoarea implicită este none dacă proprietatea nu este declarată. În acest exemplu, cadrele cheie
mută mingea spre dreapta în container. Dar la terminarea animaţiei, mingea revine la poziţia
iniţială. Acesta este modul implicit al proprietăţii animation-fill-mode.
---- Aici se găseste codul de pe codepen example in care se poate modifica proprietatea
animation-fill-mode pentru a vedea diferenţa de la o modificare la alta. ----
animation-fill-mode: forwards
La setarea proprietăţii animation-fill-mode cu forwards, după terminarea animaţiei, mingea va
reţine cadrul cheie 100%. Se poate adăuga proprietatea la clasa .ball:
animation-fill-mode: forwards;
---- Rezultatele exemplului pot fi văzute aici . ----

animation-fill-mode: backwards
Proprietatea fill-mode cu backwards este utilă atunci când se lucrează cu animaţii cu întârziere.
În exemplu, animaţia are o întârziere de două secunde, după care se mută întâi la stânga, apoi la
dreapta. Fără setarea animation-fill-mode, mingea revine la cadrul cheie 0% atunci când animaţia
începe după întârziere.
Când se adaugă o proprietate animation-fill-mode cu backwards, mingea va reveni la cadrul
cheie 0% după / în timpul întârzierii specificate

---- Animaţia poate fi considerată o extindere stilului de la cadrul cheie 0% cu întârzierea

setată.-------

animation-fill-mode: backwards;
----Aici poate fi văzut rezultatul, si aici se poate modifica animatia live pe codepen.----
Ca notă, se poate ca ţinta animaţiei să stea pe loc atunci când nu se include cadrul cheie 0%
(sau from). Browser-ul va folosi stilurile deja aplicate la țintă ca şi cadru cheie de pornire a
animației în locul cadrului cheie inițial care lipseşte, deci elementul țintă stă pe loc în timpul unei
întârzieri. Acest lucru nu poate fi întotdeauna fezabil, pentru că depinde de ceea ce se doreşte de
la animaţie.

animation-fill-mode: both
Opţiunea both combină comportamentul modurilor forwards şi backwards. Înainte de animaţie,
ţinta animaţiei se află la primul cadru cheie. După terminarea animaţiei, va rămâne la ultimul
cadru cheie.
În exemplu, folosind opţiunea both, mingea se află la primul cadru cheie înainte de începerea
animaţiei şi rămâne la ultimul cadru cheie după terminarea animaţiei.

animation-fill-mode: both;
Codul CSS final arată astfel:
.ball {
animation-name: ballmove; animation-duration: 2s; animation-timing-function: ease-in-
out; animation-iteration-count: 1; animation-delay: 1s; animation-fill-mode: both;
} @keyframes ballmove {
0% {transform: translateX(100px) rotate(0);}
20% {transform: translateX(-10px) rotate(-0.5turn);}
 100% {transform: translateX(450px) rotate(2turn);}
}
----Previzualizarea rezultatelor exemplului , sau editarea exemplului animation-fill-mode live
pe codepen.----

animation-direction
Setările pentru proprietatea animation-direction pot fi: normal, reverse, alternate şi alternate-
reverse.

----Pe codepen poate fi modificată proprietatea animation- direction pentru a vedea imediat
diferenţa.----

Setarea implicită este normal şi mută obiectul înainte prin declaraţiile listate pentru fiecare
iteraţia a animaţiei.

Setarea reverse rulează animaţia invers. Mingea se va deplasa de la dreapta la stânga.

----Aici se poate vedea exemplul cu reverse.----

Opţiunea alternate se poate folosi doar dacă are una sau mai multe proprietăţi iteration-count.
Prima dată animaţia este rulată normal; a doua oară este rulată invers; apoi iar înainte; apoi
invers... alternând direcţia, până când se ajunge la valoarea din iteration-count.

----Aici se poate vedea exemplul cu alternate.----

Opţiunea alternate-reverse funcţionează ca şi alternate, cu excepţia faptului că începe invers. Cu

setarea alternate-reverse, mingea se mişcă invers comparativ cu mişcarea normală.
La fel, proprietatea animation-timing-function este inversată de fiecare dată când direcţia
animaţiei este inversată.
 Chiar şi cu aceste simple exemple, se poate observa că adăugarea de proprietăţi suplimentare
poate duce la crearea de efecte interesante în animaţia CSS.

Cod scurt
Codul pentru proprietăţile animaţiei poate fi scris în varianta scurtă, de exemplu:
animation: myAnimation 1s ease-in-out 2s 4;
<animation-name> <animation-duration> <animation-timing-function> <animation-delay>
<animation-iteration-count>.
Ordinea elementelor poate să difere. Ordinea termenilor similari (valorile pentru durată şi
întârzierea) par să fie mai importante decât ordinea generală.
----Nota W3C:
"[the] order is important within each animation definition: the first value that can be parsed as a
<time> is assigned to the animation- duration, and the second value that can be parsed as a
<time> is assigned to animation-delay."
Ordinea este importantă pentru definirea fiecărei animaţii: prima valoare care poate fi parsată ca
<timp> este atribuită proprietăţii animation-duration, iar a doua valoare care poate fi parsată ca
<timp> este atribuită proprietăţii animation-delay.
----
Consorţiul W3C defineşte ordinea proprietăţilor astfel:
<single-animation> = <single-animation-name> || <time> || <single-animation-timing-function>
|| <time> || <single-animation- iteration-count> || <single-animation-direction> || <single-
animation-fill-mode> || <single-animation-play-state>
Pentru a defini mai multe animaţii pentru un element folosind codul scurt, trebuie separate
valorile pentru fiecare animaţie cu virgule. Deci un element care are aplicate două animaţii
aplicate, arată astfel:
animation: myAnimation 1s ease-in-out 2s 4, myOtherAnimation 4s ease-out 2s;

3 Înţelegerea termenului de easing

"Timpul este partea din animaţie care dă sensul mişcării. Mişcarea poate fi obţinută prin
desenarea aceluiaşi obiect în două poziţii diferite şi inserarea unui număr de alte desene între cele
două. Rezultatul de pe ecran va fi o mişcare, dar nu o animaţie."
- Harold Whitaker and John Halas, Timing for Animation
Mişcarea „easing” afectează modul în care are loc animaţia. Este important unde se mişcă
obiectul, dar mai important este modul în care o face. De fapt, cartea Timing for Animation se
referă doar la acest detaliu.
Acel ceva al mişcării transmite starea de spirit, greutatea și alți factori-cheie de personalitate
și de comunicare. Aceste momente de tranziție sau de schimbare a mişcării ne oferă o mare
oportunitate de a comunica, chiar și atunci când acestea au loc în mai puțin de o secundă.
Prin definiție, „easing” este modul în care viteza este distribuită pe durata unei animații. În
CSS, mişcarea „easing” este manipulată de proprietatea animation-timing-function. Avem trei
moduri de a defini timpul:
- cu cuvintele cheie;
- cu propria noastră curbă Bezier definită la comandă;
- și cu ajutorul etapelor.
Cuvintele cheie pentru easing
Să observăm mai în detaliu opţiunile predefinite pentru a obţine o imagine mai clară despre ceea
ce se petrece în spatele scenei. Cuvintele cheie predefinite pentru „easing” sunt: ease (implicit);
linear; ease- in;ease-out şi ease-in-out.
Dacă s-ar crea o diagramă cadru cu cadru a unei mingi care se mişcă între două cadre cheie
cu „easing” liniar, ar arăta astfel:

Obiectul se mişcă cu aceeaşi viteză; viteza este constantă în întreaga animaţie. Această mişcare
este percepută ca fiind mecanică şi nenaturală, deoarece în lumea reală nimic nu se mişcă cu
viteză constantă.
Aceeaşi ilustraţie pentru ease-in:

Mişcarea este mai lentă la început, apoi accelerată pe măsură ce se apropie de final. În general,
acest stil de mişcare creează momentul accelerării. Rata cu care obiectul este accelerat poate
sugera greutatea acestuia sau alte forţe care acţionează asupra lui.

Mişcarea „ease-out” are efect opus. Animaţia începe rapid şi este încetinită pe măsură ce se
apropie de capăt:
Combinând cele două concepte ease-in şi ease-out se obţine ease-in-out, în care obiectul are
viteza cea mai mare la centru şi este încetinit la capete.

Curbele Bezier
Pentru mai multe opţiuni se pot folosi curbele Bezier. Mişcarea „ease” poate fi obţinută prin
curbe Bezier. Când se doreşte mai mult control, se pot crea propriile curbe Bezier pentru funcţia
de timp.

Curba Bezier pentru mişcarea „ease” liniară

PROGRESIE

Curba Bezier pentru „ease-in-out”.

PROGRESIE
Ajustări ale formei curbei vor influenţa timpul animaţiei. Fiecare curbă Bezier este definită de
patru valori între zero şi unu care descriu curba.
cubic-bezier(0.165, 0.840, 0.440, 1.000)
Există instrumente cu care se pot obţine valorile într-un mod mai intuitiv şi totodată vizual.
Instrumente pentru crearea de curbe Bezier
Crearea de curbe Bezier cu Ceaser.

Ceaser este un instrument de generare curbe Bezier care oferă mai multe setări şi permite
tragerea punctelor pentru a crea curbe Bezier şi afişează mişcarea creată. După obţinerea unui
rezultat care vă place, codul este generat dinamic şi se poate copia în fişierul CSS. Ceaser oferă
şi ecuaţii echivalente CSS cu Penner easing equations folosite de obicei în Flash şi pot fi portate
în JavaScript, CSS şi altele.
Ceaser nu este singurul loc de unde se pot obţine informaţii utile pentru mişcarea „ease”.
Easings.net afişează versiuni interactive pentru diferite curbe Bezier şi mişcarea care rezultă din
ecuaţie. Lea Verou de pe cubic-bezier.com permite crearea, compararea şi obţinerea funcţiilor
Bezier. Animaţia este un lucru vizual, deci aceste editoare ajută la obţinerea stilului de mişcare
dorit. Folosirea lor este ami eficientă decât tastarea unor cifre şi verificarea rezultatelor.
Descrierea principiilor care se referă la mişcarea „ease”, timp şi animaţie se poate găsi în
diverse cărţi: Disney's twelve basic principles of animation, sau Timing for Animation şi The
Animator's Survival Kit.

Funcţiile pentru timp nu sunt de tip o-valoare-se potriveşte-la toate

După discuţia despre funcţiile despre timp, mai există un motiv despre modul în care CSS
foloseşte funcţiile pentru timp. Pentru animaţiile cu cadre cheie, funcţiile timpului sunt aplicate
între cadrele cheie. În multe cazuri se poate specifica doar o funcţie de timp pe animaţie:
.someClass { animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190); }
În acest caz, funcţia Bezier este aplicată între cadrele cheie ale animaţiei. Va determina stilul
mişcării între toate modificările proprietăţilor definite în cadrele cheie folosind aceeaşi funcţie.
Acest lucru nu este întotdeauna ideal, mai ales la animaţiile / mişcările complexe.
 Chiar dacă la început pare ciudat, se paote modifica funcţia pentru timp mid-animation
prin declaraţia de blocuri @keyframes:
@keyframes myAnimation {
0% { opacity: 0.5; }
50% {
opacity: 0.3;
animation-timing-function: ease-in-out;
}
100% { opacity: 1; }
}
În codul de mai sus, funcţia pentru timp „ease-in-out” este aplicată între cadrele cheie 50% şi
100%, dar funcţia anterioară este folosită implicit între cadrele cheie 0% şi 50%.
Sarcini obişnuite pentru animaţii
Mai jos sunt descrise câteva exemple utile şi interesante care pot fi folosite în animaţia CSS. În
aceste exemple codul HTML este simplu pentru a ne concentra doar pe cod CSS şi animaţie.

O animaţie cu buclă infinită în fundal

CSS este foarte util pentru acest tip de animaţie pentru că face posibilă setarea unei bucle
infinite. De exemplu câţiva nori care se plimbă pe cer. Versiunea live se află aici, in acest
exemplu de pe codepen.----
CSS conţine cod pentru nori, pentru atribuirea unei imagini de fundal, lăţimea şi înălţimea
norilor. Sunt setări diferite pentru poziţionare şi z-index pentru fiecare nor în parte:
.cloud { width: 248px; height: 131px; position: absolute;
background: transparent url(../images/cloud.png) 0 0 no-repeat;
}
.cloud01 { top: 100px; left: 300px; z-index: 100;
.cloud02 { top: 240px; z-index: 200;
}
Pentru a mişca norii trebuie definită animaţia în cadre cheie şi denumită drift. Norii care se mişcă
pe cer pot folosi cadrele cheie from şi to:
@keyframes drift {
from {transform: translateX(-255px);} to {transform: translateX(1350px);}
}
Valorile pentru începutul şi sfârşitul animaţiei sunt înafara ecranului.
Apoi se atribuie animaţia ambilor nori dar modificând puţin proprietăţile pentru a folosi în
animaţie aceleaşi cadre cheie. Animaţia se defineşte separat pentru a putea fi reutilizată. Pentru
primul nor se atribuie animaţia drift timp de 25 de secunde. Pentru proprietatea animation-
timing-function se alege opţiunea linear pentru ca viteza să fie constantă de-a lungul mişcării şi
pentru animation-iteration-count se alege infinite.
.cloud01 { animation: drift 25s linear infinite; }
Al doilea nor va folosi aceeaşi animaţie, dar se va mişca mai încet, timp de 35 secunde. În plus,
animaţia va fi întârziată cu 10 secunde, iar pentru animation-fill-mode se alege backwards.
Astfel, norul va prelua stilurile primul cadru cheie (cadrul cheie from keyframe) dar cu o
întârziere de 10 secunde.
.cloud02 {animation: drift 35s linear 10s infinite backwards;}

----Aici poate fi văzut codul final, unde cei doi nori se comportă diferit, chiar dacă folosesc
aceleaşi cadre cheie.----
Refolosirea animaţiei la mai multe elemente este o caracteristică foarte utilă din animaţia CSS.
Făcând proprietăţile diferite pentru fiecare folosire, setul de cadre cheie poate fi foarte versatil.

Animarea unei imagini folosind etapele (steps)

Etapele se comportă diferit comparativ cu opţiunile animation-timing-function. Sunt folosite mai
ales în combinaţie cu o imagine multiplă pentru a crea o animaţie film, sau una cadru cu cadru.
----Se poate analiza exemplul de pe codepen. Sursa se poate vedea cu click pe Edit this Pen.----
Animaţia se află într-o singură imagine care conţine toate cadrele animaţiei. Imaginea se
atribuie ca fundal unui element div, apoi se mută imaginea pentru a crea animaţia. Etapele
definesc numărul de opriri ale imaginii din fundal de-a lungul timpului.
Etapele împart durata animaţiei în părţi egale bazate pe numărul de etape definit. Fiecare din
aceste etape este ca un cadru al animaţiei. În locul unei mişcări continue, animaţia este împărţită
într-o serie de instantanee.

În acest exemplu se foloseşte un personaj care merge, desenat de Scott Benson.

Cadrele din animaţie au fost exportate din After Effects ca o serie de imagini de tip PNG, apoi au
fost asamblate în Photoshop.
În fişierul CSS, elementului div i se atribuie o lăţime şi o înălţime care se potrivesc
dimensiunilor unui singur cadru din animaţie, iar ca imagine din fundal este aleasă imaginea cu
cadre.
.sprite { width: 245px; height: 400px; display: block;
background: transparent url(../images/walker.png)
00
no-repeat; margin: 3em auto;

Ca şi la alte funcţii pentru timp, etapele constau dintr-o listă de cadre cheie pentru a defini
animaţia. Se creează o definiţie pentru cadrele cheie, se denumeşte cu „walker” şi se definesc
două cadre cheie:
@keyframes walker {
0% {background-position: 0 0;}
100% {background-position: 0 -4000px;}
}
Înălţimea totală a imaginii este de 4000 pixeli şi se foloseşte un număr negativ pentru ca
imaginea să urce în sus. Pe măsură ce imaginea urcă, vor fi afişate cadrele de jos. Folosind
cadrele cheie de mai sus, se va muta imaginea de la poziţia 0 0 până la poziţia 0 -4000px.
Animaţia poate fi simplificată prin eliminarea cadrului cheie 0%. Chiar dacă nu se specifică
cadrul cheie de la începutul animaţiei (aici cadrul cheie 0%), stilurile aplică elementului punctul
de începere a animaţiei. Poziţia de pornire a imaginii din fundal a fost deja aleasă la 0 0 când
imaginea de fundal a fost atribuită la clasa .sprite, deci nu mai este nevoie să se repete
instrucţiunea în cadrele cheie. Comanda siimplificată:
@keyframes walker {
100% {background-position: 0 -4000px;}

După definirea eficientă a animaţiei, aceasta se atribuie clasei .sprite.

Elementului div i se atribuie animaţia cu clasa .sprite şi i se dă timpul de o secundă. (Durata
poate fi modificată.)
Se defineşte funcţia animation-timing-function ca steps(10) care va împărţi durata animaţiei în
zece etape. Zece este şi numărul de cadre care se află în imaginea cu cadre, deci fiecare cadru va
fi văzut o singură dată la rularea animaţiei.
Apoi proprietatea animation-iteration- count se va seta la infinite.
Ciclul de mers a fost realizat astfel încât să poată fi repetat, deci în acest caz personajul poate
merge mereu. A fost adăugată o proprietate în plus la clasa .sprite:
.sprite { animation: walker 1s steps(10) infinite; }
----Animaţia finală poate fi văzută aici.----
 Începerea şi oprirea animaţiei cu animation-play-state
Implicit, animaţiile încep imediat după atribuire.
Însă acestea pot fi atribuite sau pot avea diferite proprietăţi la acţiunea „on hover” sau altele în
CSS. La combinarea cu JavaScript posibilităţile sunt mai multe.
----Ca în exemplul anterior, se poate vedea codul live pe codepen cu un web browser. Pentru
a vedea codul sursa se poate folosi linkul Edit this Pen.----
În acest exemplu se află un sticker, compus din imagine şi text, care se rotesc doar când
cursorul de mouse se află deasupra, pentru a atrage atenţia asupra unui lucru. Definirea animaţiei
care roteşte stickerul:
@keyframes spin {
100% {transform: rotate(1turn);}
}
Apoi aceasta se atribuie la sticker, cu un element div având clasa .sticker. În plus, se adaugă
proprietatea animation- play-state la pauză:
.sticker {
animation: spin 10s linear infinite; animation-play-state: paused;
Proprietatea animation-play-state poate lua valori pentru rulare animaţie (implicit) sau pauză.
În fereastra de previzualizare încă nu se vede nimic.
Sticker este setat la rotire, apoi imediat la pauză. Pentru a vedea rezultatul dorit, trebuie setată
proprietatea animation-play-state să ruleze la un moment dat. În acest caz, atunci când cursorul
de mouse se află deasupra elementului:
.sticker:hover { animation-play-state: running; }
Acum stickerul se roteşte doar atunci când cursorul de mouse se află deasupra lui. În loc să
comută între cele două stări, se poate folosi proprietatea animation-play-state pentru a alege
opţiuni mai puţin folosite la efectele hover. În situaţii cu animaţii liniare, este bine ca acestea să
fie oprite până când totul este pregătit pentru rularea animaţiei.
Codul CSS complet:
body {padding:4em; background:#fcfcfc;}
.wrap {width:200px; margin:auto; position:relative;}
.msg {
color: whitesmoke; text-align: center; font-family: serif; font-size: 3.5em; width: 200px;
position: absolute; margin: 55px 0 0 2px; pointer-events: none;
}
.sticker { width: 200px; height: 200px; position: absolute;
background: url(../images/sticker.png) top center no-repeat; animation: spin 10s linear
infinite; animation-play-state: paused;
}
.sticker:hover { animation-play-state: running;
}
@keyframes spin { 100% {transform: rotate(1turn); } }
----Aici se poate vedea animatia din exemplu----
La combinarea JavaScript cu animaţia CSS pentru interacţiune mai robustă, există evenimente -
events - pentru animaţie care pot fi folosite în JavaScript la pornirea, în timpul şi la finalul
animaţiei CSS.
----Explicaţii în Mozilla Developer Connection has a wonderful explanation of them si Craig
Buckler walks you through how to catch all different browser naming variations de pe
SitePoint .----
Mai multe animaţii, un singur obiect
Se pot adăuga mai multe animaţii pentru un element, prin indicarea acestora una după alta. Acest
lucru se poate face doar cu cod CSS.
Este posibil ca să fie două animaţii care folosesc acelaşi element în acelaşi timp. Oricum,
CSS nu poate combina două sau mai multe seturi individuale de cadre cheie, pentru că rezultatul
nu este cel dorit.
----Pentru a demonstra cum se pot face mai multe animatii, vom anima o medalie care se
rostogoleste de la stânga, apoi se măreşte, se micsorează înainte de a se opri. Animatia poate fi
văzută live pe codepen.----

Pentru început se vor crea două animaţii cu cadre cheie:

@keyframes roll-in {
0% {transform: translateX(-200px) rotate(0deg);}
100% {transform: translateX(0) rotate(360deg);}
}
@keyframes scale-up {
0% {
transform: scale(1); animation-timing-function: ease-in;
}
25% {
transform: scale(1.15); animation-timing-function: ease-out;
}
60% {
transform: scale(0.9); animation-timing-function: ease-in;
}
100% {
transform: scale(1); animation-timing-function: ease-out;
}
Se va folosi declaraţia pentru primul cadru pentru a avea un marcaj (care este un element div cu
clasa .mol atribuită) de rulare dinspre stânga. Are doar două cadre cheie pentru a muta de la
stânga la dreapta la care se adaugă o rotire.
A doua animaţie va anima mărimea marcajului. Se poate modifica şi funcţia pentru timp.
.mol {
animation-name: roll-in, scale-up; animation-duration: 1s, 0.75s; animation-delay: 0s, 1s;
animation-timing-function: ease-in, linear; animation-iteration-count: 1; animation-fill-
mode: forwards;
}
Proprietăţile pentru fiecare animaţie sunt separate de virgulă, şi trebuie să fie în aceeaşi ordine în
care se află în lista cu nume pentru animaţii. În acest caz, primele valori sunt de 1s, 0s şi
mişcarea ease-in sunt asociate cu animaţia roll-in pentru că a fost denumită prima, iar a doua
valoare la animaţia de mărire. În orice instanţă unde este specificată doar o valoare, cum ar fi
animation-iteration-count, aceasta va fi folosită pentru ambele animaţii.
Prin setarea unei întârzieri pentru a doua animaţie, exact aceeaşi ca durata primei animaţii,
aceasta va începe imediat după terminarea primei animaţii. La fel, se pot adăuga animaţii
suplimentare, la care se poate ajusta întârzierea şi durata. În acest exemplu, vor fi doar două
animaţii. În CSS animaţiile arată astfel:
.mol {
width: 174px; height: 174px;
background: transparent url('../images/mol_badge.png') top center no-repeat; position:
absolute; left: 400px;
animation-name: roll-in, scale-up; animation-duration: 1s, 0.75s; animation-delay: 0s, 1s;
animation-timing-function: ease-in, linear; animation-iteration-count: 1; animation-fill-
mode: forwards;
}
@keyframes roll-in {
0% {transform: translateX(-200px) rotate(0deg);} 100% {transform: translateX(0px)
rotate(360deg);}
}
@keyframes scale-up {
0% {
transform: scale(1); animation-timing-function: ease-in;
}
25% {
transform: scale(1.15); animation-timing-function: ease-out;
}
60% {
transform: scale(0.9); animation-timing-function: ease-in;
}
100% { transform: scale(1); }
}

----Aici se poate vedea versiunea finală----

Performanţă şi suport pentru browser

Mai întâi se verifică în documentaţia despre browsere şi dacă animaţia funcţionează pe acele
browsere.

CSS versus JavaScript pentru animaţie: cine câştigă?

Diferite teste, ca şi cel postat pe blogul Opera Dev, au arătat că animaţia CSS este randată mai
rapid şi foloseşte mai puţină memorie comparativ cu echivalentul realizat în JavaScript. Acest
lucru se întâmplă pentru că munca pentru afişarea animaţiei CSS este făcută de browser intern,
lucru care permite creşterea eficienţei.
Animaţiile CSS pot beneficia şi de performanţe crescute datorită accelerării hardware, mai
ales când se folosesc transformări ca în demonstraţia lui Paul Irish.----
Aceste demonstraţii şi alte similare, arată că animaţia CSS poate fi afişată în multe cazuri mai
rapid decât JavaScript.

Suport pentru browserul curent

Cele mai bune resurse pentru informaţii suport ale browserelor se pot găsi pe caniuse.com. Aici
se specifică browserele care suportă animaţii.
Pentru audienţa Android, se poate vedea documentaţia pentru animaţii CSS din Android browser
3.0 şi mai mic. ----Daniel Eden are câteva sfaturi utile pentru browserul mai vechi din
Android.----
Cel mai bine este să se testeze rezultatul pe dispozitive sau browsere diferite.

Se pot folosi azi animaţiile CSS?

Animaţiile CSS au suport larg, iar noile browsere pot afişa animaţiile. Însă sunt şi browsere care
nu pot reda animaţiile CSS. Dacă se folosesc animaţii CSS, se va verifica ce se petrece în acele
browsere.

Animaţiile ca detalii de design

Când animaţiile se folosesc doar pentru detalii de design, nu sunt probleme, pentru că browserele
care nu pot interpreta CSS îl ignoră.
Se verifică dacă animaţiile adăugate ca detalii de design nu sunt importante. Folosirea de
transformări şi alte proprietăţi se păstrează separat.
O animaţie care se repetă la infinit (de exemplu, norii), rulată pe un browser care nu poate
reda animaţia, va afişa norii fără animaţie.
Animaţii esenţiale
Când se lucrează cu animaţii care au conţinut important, există doouă opţiuni: implementarea
unei alternative; sau crearea animaţiilor folosind suport mai larg decât CSS.
Se evită efortul dublu (de exemplu, scrierea de cod CSS şi JavaScript) în cazurile în care sunt
alte alternative. Aici se poate folosi doar varianta JavaScript.
Instrumente cum ar fi ----Modernizr ---- pot ajuta la detectarea erorilor şi pot acţiona
corespunzător, oferind o versiune JavaScript sau alta varianta pentru a rezolva problema.
În unele cazuri, se poate scrie un anunţ pentru audienţă în care se precizează browserele care
afişează bine animaţia.
Dacă nu se poate folosi animaţia CSS, există alternative în codepen şi JS Bin unde se poate
experimenta.
La final...
Ghidul de mai sus prezintă foarte pe scurt ce se poate realiza în animaţia CSS. Mai multe detalii
se pot găsi în adresele de referinţă din ghid unde se poate experimenta mai mult.