Introducere în Web Development

Animațiile sunt mai complexe decât tranzițiile, dar ne oferă mai mult control asupra modului în care mișcăm elementele.

Animațiile în CSS se bazează pe momente cheie (keyframes), în care spunem ce proprietăți va avea elementul când se ajunge la acel moment. Browserul va schimba valorile proprietăților de la precedentul frame.

Aceste momente sunt date cu ajutorul procentelor. 0% înseamnă începutul animației, 100% sfârșitul. Putem defini oricâte momente cheie folosind procente. Acest sistem ne permite să refolosim animația și controlăm alte aspecte ale animației individual pentru diferite elemente.

@keyframes

Pentru a defini o animație, trebuie să ne gândim la un nume pe care să i-l dăm. Acel nume îl vom pune în structura @keyframes:

                    @keyframes NumeAnimatie {
    from {
        /* ... */
    }
    25% {
        /* ... */
    }
    to {
        /* ... */
    }
}
                

Această structură se pune în afara oricărui selector.

Cuvintele from și to sunt doar alternative la 0% respectiv 100%.

Proprietăți pentru animație

Câteva dintre proprietățile folosite pentru animații seamănă celor folosite la tranziții, doar că se folosește familia animation.

animation-name

Numele animației trebuie să fie identic celui definit la @keyframes.

În nume, poți folosi litere (a-z, A-Z), cifre (0-9), și liniuțe (- și _), dar nu poți începe cu mai mult de un minus și trebuie să fie cel puțin o literă înaintea primei cifre.

Se mai poate folosi cuvântul none pentru a dezactiva animațiile.

                    animation-name: NumeAnimatie;
                

animation-duration

Durata animației se poate da în secunde s sau milisecunde ms.

În caz că ai chiulit la orele de fizică, 1s = 1000ms

Browserul va trece prin proprietățile setate în animație, de la 0% la 100% în durata de timp definită aici.

                    animation-duration: 2s;
                

Setând valoarea la 0s sau 0ms, se dezactivează animațiile.

animation-timing-function

Această proprietate ne lasă să configurăm cum sunt calculați pașii intermediari. Se poate mări sau micșora viteza animației.

Mai sunt și alte funcții, pe care sincer nu le înțeleg suficient de bine să le explic.

Această proprietate poate fi setată și în interiorul unui keyframe, pentru a controla mai bine viteza până și după.

animation-delay

Cu animation-delay definim în secunde sau milisecunde cât să aștepte înainte să înceapă animația. Dacă nu am definit ceva, animația începe imediat.

animation-iteration-count

Dăm un număr, care reprezintă de câte ori se repetă o animație.

Dacă nu dăm, sau folosim cuvântul infinite, animația va continua să se repete.

                    .infinite-animation {
/*
  Animația se repetă la nesfârșit
*/
  animation-iteration-count: infinite;
}

.six-times {
/*
  Animația se repetă de 6 ori
*/
  animation-iteration-count: 6;
}
                

animation-direction

Putem să setăm direcția în care rulează animația.

animation-play-state

Folosind această proprietate, putem controla dacă animația noastră rulează sau nu.

Cu valoarea paused, se va opri și va rămâne acolo unde e.
Cu valoarea running, va continua să ruleze, începând de unde a fost oprită.

Putem seta aceste valori atunci când starea elementului se schimbă, fie prin pseudo-clase, fie prin JS (modificare de clase, sau în atributul style).

                    .target {
  animation: spin 1s linear;
  animation-play-state: running;
}

.target:hover {
  animation-play-state: paused;
}
                

Proprietatea animation

Putem combina toate valorile proprietăților de mai sus într-o singură proprietate animation.

Ordinea contează doar pentru animation-duration și animation-delay. Dacă apare o singură valoare de timp, va fi considerată durată. Dacă apar două, a doua va fi întârzierea.

Se pot defini mai multe animații în același timp, separându-le prin virgulă.

                    transition: 
  spin 250ms ease-in, 
  fade 1s linear;
                

În loc de proprietățile individuale, eu folosesc de obicei direct animation. Se pot folosi și proprietățile individuale dacă avem nevoie să schimbăm ceva și nu vrem să redefinim animația. De exemplu dacă vrem să ne jucăm cu animation-play-state