Animații CSS. Ce sunt animațiile CSS? Regula @keyframes.

Susține Lectii-Virtuale!

Ce sunt animațiile CSS?

O animație permite unui element să se schimbe treptat de la un stil la altul.
Puteți modifica câte proprietăți CSS doriți, de câte ori doriți.
Pentru a utiliza animația CSS, trebuie mai întâi să specificați câteva cadre cheie pentru animație.
Cadrele cheie conțin ce stiluri va avea elementul în anumite momente.

Regula @keyframes

Când specificați stiluri CSS din regula @keyframes, animația se va schimba treptat de la stilul curent la noul stil în anumite momente.

Pentru ca animația să funcționeze, trebuie să legați animația de un element.

Următorul exemplu leagă animația „exemplu” de elementul <div>. Animația va dura 4 secunde și va schimba treptat culoarea de fundal a elementului <div> de la „red” la „yellow”:

Exemplu:

/* The animation code */
@keyframes example {
  from {background-color: red;}
  to {background-color: yellow;}
}

/* The element to apply the animation to */
div {
  width: 100px;
  height: 100px;
  background-color: red;
  animation-name: example;
  animation-duration: 4s;
}

Notă: Proprietatea animation-duration definește cât timp ar trebui să dureze o animație. Dacă proprietatea animation-duration nu este specificată, nu va apărea nicio animație, deoarece valoarea implicită este 0s (0 secunde).

În exemplul de mai sus am specificat când stilul se va schimba folosind cuvintele cheie „from” și „to” (care reprezintă 0% (start) și 100% (complet)).