La proprieta’ animation in CSS3

la-proprieta-animation-in-css3

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!

Scritto da Magoo

Magoo

Web Developer & Mobile Developer, Game Lover insomma un Nerd.
Co-founder Iwebdesigner.it, Nerdzhouse SRL.
Prendo a schiaffi la tastiera fino a quando non succede qualcosa di buono.

COMMENTA

Loading Disqus Comments ...
Loading Facebook Comments ...

Lascia un commento

Il tuo indirizzo email non sarà pubblicato. I campi obbligatori sono contrassegnati *