La proprieta’ animation in CSS3

La proprieta’ animation e’ utilizzata per modificare i valori delle proprieta’ CSS piu’ volte nel corso del tempo, proprio come una linea temporale Flash.Vediamo come si dichiara un’animazione in CSS3. Innanzi tutto bisogna utilizzare @keyframes, dargli un nome, poi generare dei passi in percentuale dentro a questa dichiarazione, come nell’esempio che segue:

@keyframes nomAnim{
from { color:blue; }
35%  { color:green; }
to   { color:red; }
}

Le parole chiave from e to corrispondano rispettivamente a 0 e 100%.

La proprieta’ animation si compone di altre proprieta che adesso andiamo ad elencare:

animation-name: il nome della nostra animazione;

animation-delay: il ritardo che deve subire l’animazione;

animation-duration: il tempo della durata in secondi dell’animazione;

animation-timing-function: il metodo di interpolazione dell’animazione (accelerazione e decelerazione);

animation-direction: la direzione dell’animazione;

animation-iteration-count: quante volte l’animazione si deve ripetere;

animation-play-state: e’ ancora in fase di studio da W3c.

Esiste anche una tipologia di animazione stenografica. Nell’esempio, l’animazione avra’ una durata di 10 secondi, con un ritardo di 2 secondi e si svolgera’ in maniera lineare:

animation: nomeanimazione 10s linear 2s;

Questo e’ tutto sulla proprieta’ animation in CSS3.

Alla prossima!