fbpx

Animazioni con CSS3

Animazioni con CSS3

di Giovanni Sodano Gennaio 17, 2012

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?

Condividi questo contenuto sui Social

Iscriviti per rimanere in contatto con me!

Niente spam, promesso!

Lasciami un commento, te ne sono grato.

La tua email address will not be published. Required fields are marked *