Cauta rapid aici ↑

CSS 3 -- ANIMATII

Animatiile in paginile web au fost intotdeauna un mod de a imbogati continutul unui site. Cu standardul CSS 3 putem crea acum animatii simple fara sa ne mai folosim de un program special construit pentru asa ceva.

Pentru crearea unei animatii vom avea nevoie de doua proprietatii.

  • animation
  • @keyframes

Proprietatea animation

Rolul acestei proprietatii este de a spune browserului ca elementul in care se afla aceasta proprietate va fi animat . Valorile minime pentru aceasta proprietate generala sunt numele animatiei (care este dat de catre noi) si durata animatiei exprimata in secunde. Daca nu este declarata durata animatiei, aceasta nu va functiona si asta pentru ca setarea de baza este zero secunde.

Proprietatea @keyframes

Aceasta proprietate este locul unde animatia va avea loc. In interiorul acoladelor vom avea doua puncte de pornire a animatiei reprezentate din doua cuvinte: from si to sau altfel spus 0% si 100% . La randul lor aceste cuvinte, ce seamana ca niste selectorii, vor avea declarate stilurile de inceput si stilurile de sfarsit ale elementului pe care vrem sa il animam. De retinut ca odata ce animatia si-a terminat ciclul de rulare asupra elementului afectat, elementul va reveni la setarile lui de baza. Dupa cum ne putem da seama, putem sa folosim in locul cuvintelor valori in procente si la care vrem sa fie aplicat un stil cand animatia se afla la acel procent din rulare.

PROPRIETATEDESCRIERE
  
@keyframesSpecifica o animatie
animationSpecifica proprietatea generala ce include toate setarile generale cu exceptia proprietatilor animation-play-state si animation-fill-mode
animation-delaySpecifica unitatea de timp cu care va intarzia animatia
animation-directionSpecifica daca animatia va curge doar intr-un singur sens sau nu
animation-durationSpecifica cate secunde sau milisecunde va dura animatia la o singura rulare
animation-fill-modeSpecifica ce stiluri se vor aplica pe element atunci cand animatia este la sfarsit sau are o intarziere
animation-iteration-countSpecifica numarul de rularii ale animatiei
animation-nameSpecifica numele animatiei din proprietatea @keyframes
animation-play-stateSpecifica daca animatia ruleaza sau este pe pauza
animation-timing-functionSpecifica viteza de rulare a animatiei