Conosciamo le Animazioni css3

Scritto il 17 marzo, 2013 in news

Vorrei fare una piccola introduzione a uno strumento davvero potente e cool che ci permette di ricreare animazioni anche complesse grazie alle nuove tecniche css3. Dimentichiamoci quindi strumenti obsoleti come Flash o immagini animate e affacciamoci a questa nuova tecnologia che negli ultimi anni sta rivoluzionando le animazioni per web, semplificando il lavoro del web designer, che spesso deve far ricorso a javascript (jQuery) per creare effetti di ogni genere che siano cross browser.

Nonostante il nostro “amico” Internet Explorer non supporti ancora queste regole, le animazioni css3 saranno sicuramente protagoniste nel futuro più prossimo.. vediamo come funzionano!

animazioni css3

 

Per prima cosa dobbiamo famigliarizzare con la regola @keyframes.


CREIAMO L’ANIMAZIONE CON I @keyframes

Con questa semplice dichiarazione definiamo l’animazione dandogli un nome e definendo i valori iniziali (from) e finali (to) in questo modo:

@keyframes myanimation {
from { background: green; }
to { background: yellow; }
}

Possiamo anche creare animazioni più complesse e specificare i vari passaggi senza limitarci ai valori iniziali e finali, ma usando valori personalizzati in percentuale sulla timeline della nostra animazione:

@keyframes myanimation {
0%   { background: red; }
25%  { background: yellow; }
50%  { background: blue; }
100% { background: green; }
}


ASSOCIAMO L’ANIMAZIONE

Una volta registrata la nostra animazione possiamo usarla per i nostri elementi html specificandone obbligatoriamente la durata in secondi:

div { animation: myanimation 5s; }

Con queste semplici regole css3 abbiamo creato un’animazione che fa variare il colore di un <div> nel tempo di 2 secondi!


PROPRIETA’ ANIMAZIONI CSS3

Associando la nostra animazione possiamo specificare alcune proprietà interessanti. Vediamole nello specifico:

animation-name: Diamo un nome alla nostra animazione

animation-duration: Definiamo la durata del ciclo di animazione in secondi o millisecondi (defoult: 0)

animation-timing-function: Definiamo l’effetto di transizione dell’animazione durante il tempo di un ciclo (defoult: ease)

animation-delay: Specifichiamo quando inizia l’animazione, utile se vogliamo farla partire in ritardo (defoult: 0)

animation-iteration-count: Specifichiamo quante volte verrà ripetuta l’animazione (default: 1). Usiamo “infinite” per una animazione continua.

Bene! Ora che abbiamo capito come muoverci non ci resta che sbizzarrirci con la nostra fantasia per creare le nostre animazioni!


SUPPORTO

supporto animazioni css3

Ad oggi le animazioni css3 sono supportate da tutti i browser moderni grazie all’uso dei suffissi, tranne che per Internet Explorer. Quindi per rendere compatibile la nostra animazione dovremmo scriverla in questo modo:

Registriamo l’animazione:

@keyframes myanimation
{
from {background: red;}
to {background: yellow;}
}

@-moz-keyframes myanimation /* Firefox */
{
from {background: red;}
to {background: yellow;}
}

@-webkit-keyframes myanimation /* Safari and Chrome */
{
from {background: red;}
to {background: yellow;}
}

@-o-keyframes myanimation /* Opera */
{
from {background: red;}
to {background: yellow;}
}

Associamola al nostro elemento:

div {
animation: myanimation 5s linear 2s infinite;
/* Firefox: */
-moz-animation: myanimation 5s linear 2s infinite;
/* Safari and Chrome: */
-webkit-animation: myanimation 5s linear 2s infinite;
/* Opera: */
-o-animation: myanimation 5s linear 2s infinite;
}

E voi avete già usato le animazioni css3 nei vostri progetti?