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à |  |
 |
 |
 |
 |
|---|---|---|---|---|---|
| @keyframes | 10.0 | 4.0 -webkit- | 16.0 5.0 -moz- | 4.0 -webkit- |
15.0 -webkit- 12.1 12.0 -o- |
| animation | 10.0 | 4.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
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 |
div { width: 100px; height: 100px; background-color: green; -webkit-animation-name: quadrato; /* Chrome, Safari, Opera */ -webkit-animation-duration: 4s; /* Chrome, Safari, Opera */ animation-name: quadrato; animation-duration: 4s; } /* Istruzione per i browser Chrome, Safari e Opera */ @-webkit-keyframes quadrato { from {background-color: green;} to {background-color: blue;} } /* Sintassi per tutti gli altri browser */ @keyframes quadrato { from {background-color: green;} to {background-color: blue;} } |
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
|
1 2 |
<div></div> <p>Ciao! Questa è la mia prima animazione CSS3. Yaooooooo! :D</p> |
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.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 |
<!DOCTYPE html> <html> <head> <style> div { width: 100px; height: 100px; background-color: green; -webkit-animation-name: quadrato; /* Chrome, Safari, Opera */ -webkit-animation-duration: 4s; /* Chrome, Safari, Opera */ animation-name: quadrato; animation-duration: 4s; animation-delay: 1s; animation-iteration-count: 2; animation-fill-mode: backwards; } /* Istruzione per i browser Chrome, Safari e Opera */ @-webkit-keyframes quadrato { from {background-color: green;} to {background-color: blue;} } /* Sintassi per tutti gli altri browser */ @keyframes quadrato { from {background-color: green;} to {background-color: blue;} } </style> </head> <body> <div></div> <p>Ciao! Questa è la mia prima animazione CSS3. Yaooooooo! :D</p> </body> </html> |
Programmatore WordPress Esperto WooCommerce
Sono l’autore di questo blog con tanti trucchi e guide su WordPress e WooCommerce.
