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?