animazione css3

Come fare animazioni con CSS3

Oggi vediamo di divertirci un pò con le animazione di CSS3, c’è da dire che alcune di queste proprietà non sono correttamente visibili sui browser più antiquati, in fondo lascio una piccola legenda così da averla come promemoria nel caso doveste mai utilizzare il CSS3 animation in qualche progetto.

CSS3 Animations e compatibilità browser

La compatibilità browser è la seguente

Proprietàiegoogle_chromefirefoxsafariopera
@keyframes10.04.0 -webkit-16.0 5.0 -moz-4.0 -webkit-

15.0 -webkit-

12.1 12.0 -o-

animation10.04.0 -webkit-16.0 5.0 -moz-4.0 -webkit-

15.0 -webkit-

12.1 12.0 -o-

Cosa sono le animazione CSS3 ?

Con una CSS3 animation è possibile fare spostare un oggetto da un punto ad un altro della pagina (testo, div, ecc, ecc), è possibile utilizzare più animazioni conteporaneamente e per quante volte si vuole, per funzionare, un’animazione CSS3 necessita dei keyframes che sono delle istruzioni (regole o rules) sul movimento dell’oggetto da animare.

Esempi di animazione con CSS3

In questo esempio vediamo come un div passa dal colore verde a quello blu in 4 secondi

CSS

Analizziamo il codice CSS e vediamo come scriverlo correttamente

Riga 7  – animation-name : come si evince è il nome dell’animazione, possiamo chiamarla a piacimento purchè poi venga richiamata in modo identico dal keyframes ossia nelle righe 12 e 18.

Riga 8 – animation-duration : qui stiamo passando il numero (in secondi) della durata dell’animazione

Riga 19 e 20 – from / to : stiamo indicando che l’animazione passerà dal colore verde (from) al colore blu (to)

HTML

Per quanto concerne il codice HTML in questo caso è molto semplice, è sufficiente aprire e chiudere il tag div in quanto viene formattato già dal nostro CSS; il tag p fa solo figo 😀 in realtà non è necessario all’animazione, si può eliminare, modificare o sostituire con un qualunque altro tag.

Alcuni esempi di tipologie di animazione CSS3

Esistono altri parametri da poter passare nelle istruzione CSS così da avere animazione un pò più complesse, per esempio :

animation-delay: 1s  : indica il tempo impiegato per eseguire una determinata animazione, nel nostro quadrato il tempo che passa da verde a blu, anche qui il parametro è dato in secondi.

Valori supportati :  secondi|initial|inherit

animation-iteration-count: 3 : indica il numero di animazioni da eseguire, al termine ricomincia daccapo e così via per 3 volte o per il numero indicato.

Valore supportati : numerodivolte|infinite|initial|inherit

animation-direction: inverse : indica come eseguire l’animazione, nel nostro caso se viene specificato il valore “inverse” anzichè passare da verde (from) a blu (to) invertirà i parametri e quindi passerà da blu (to) a verde (from).

Valori supportati : normal|reverse|alternate|alternate-reverse|initial|inherit

Codice HTML / CSS completo

Questo è il codice completo di HTML e CSS3 per l’animazione in esempio.

Programmatore WordPress e Joomla, PHP/MySQL.
Sono freelance mi trovi come Professionista Joomla e articolista nella lista ufficiale di joomla.it, e come Professionista WordPress nella lista ufficiale di WUG Italia.
Dal 2006 sono titolare di Web Synapse, una Web Agency di Milano.
Pratico Kung Fu Wing Chun e mi piacciono le tagliatelle al ragù ! :-)

Commenta l'articolo

Pin It on Pinterest

Condividi l'articolo. Grazie.

Vuoi essere aggiornato ?