Animazioni con CSS3

Impariamo cosa sono e come si usano i @keyframes
Analizziamo e studiamo le proprietà CSS3 che occorrono per creare delle gradevoli e semplici animazioni senza utilizzare flash, swish, javascript o chi per essi.
Per creare delle animazioni ci occorre una sorta di linea temporale (come Flash) che in questo caso è sostituita dalla proprietà CSS animation.
Bisogna conoscere ed utilizzare @keyframes, dargli un nome e successivamente generare dei passi in percentuale all’interno di questa dichiarazione.
Le @keyframes sono quelle regole che permettono agli elementi ai quali sono applicate di modificare gradualmente nel corso del tempo.
Vediamo un esempio
@keyframes nomeanimazione { from ( color: red; ) 35% ( color: green; ) to ( color: blue ) } @-moz-keyframes nomeanimazione /* Firefox */ { from ( color: red; ) 35% ( color: green; ) to ( color: blue ) } @-webkit-keyframes nomeanimazione /* Safari e Chrome */ { from ( color: red; ) 35% ( color: green; ) to ( color: blue ) }
Le parole from e to corrispondono rispettivamente allo 0% e al 100% della nostra linea temporale. 35%, invece, corrisponde all’intervallo temporale in cui vogliamo che il nostro elenento diventi verde.
Le altre proprietà di animation sono le seguenti:
animation-name: il nome della nostra nimazione
animation-delay: il ritardo che deve subire l’animazione (default 0)
animation-duration: il tempo della durata in secondi dell’animazione (default 0)
animation-timing-function: il metodo di interpolazione dell’animazione (accelerazione o decelerazione) (default ease)
animation-direction: la direzione dell’animazione (normal, linear, ecc…)
animation-iteration-count: quante volte si deve ripetere l’animazione (default 1)
animation-play-state: se deve partire o meno quando viene mostrata (running o paused)
Supporto browser
@keyframes
Internet Explorer: NO
Mozilla: SI (-moz)
Chrome: SI (-webkit)
Safari: SI (-webkit)
Opera: NO
Vediamo adesso un esempio complesso.
Cambiamo posizione e colore a un quadrato.
(non funziona in Internet Explorer e Opera)
div { width:100px; height:100px; background:red; position:relative; animation-name:myfirst; animation-duration:5s; animation-timing-function:linear; animation-delay:2s; animation-iteration-count:infinite; animation-direction:alternate; animation-play-state:running; /* Firefox: */ -moz-animation-name:myfirst; -moz-animation-duration:5s; -moz-animation-timing-function:linear; -moz-animation-delay:2s; -moz-animation-iteration-count:infinite; -moz-animation-direction:alternate; -moz-animation-play-state:running; /* Safari and Chrome: */ -webkit-animation-name:myfirst; -webkit-animation-duration:5s; -webkit-animation-timing-function:linear; -webkit-animation-delay:2s; -webkit-animation-iteration-count:infinite; -webkit-animation-direction:alternate; -webkit-animation-play-state:running; } @keyframes myfirst { 0% {background:red; left:0px; top:0px;} 25% {background:yellow; left:200px; top:0px;} 50% {background:blue; left:200px; top:200px;} 75% {background:green; left:0px; top:200px;} 100% {background:red; left:0px; top:0px;} } @-moz-keyframes myfirst /* Firefox */ { 0% {background:red; left:0px; top:0px;} 25% {background:yellow; left:200px; top:0px;} 50% {background:blue; left:200px; top:200px;} 75% {background:green; left:0px; top:200px;} 100% {background:red; left:0px; top:0px;} } @-webkit-keyframes myfirst /* Safari and Chrome */ { 0% {background:red; left:0px; top:0px;} 25% {background:yellow; left:200px; top:0px;} 50% {background:blue; left:200px; top:200px;} 75% {background:green; left:0px; top:200px;} 100% {background:red; left:0px; top:0px;} }
E tu hai mai usato le animazioni in CSS3?
Cosa ne pensi?