Creare un animazione personalizzata con CSS3
Creare un animazione personalizzata con CSS3 è una delle funzioni più interessanti. Un animazione personalizzata con CSS3 permette di dare un tocco innovativo al nostro sito o creare pagine che colpiscano l’utente e lo invoglino a fare determinate azioni. Quindi spiegherò come utilizzare la funzione KEYFRAME e la regola ANIMATION di CSS3.
Creare animazioni personalizzata con KEYFRAME
La regola KAYFRAME ci permette di creare animazioni personalizzate con CSS3, essa dichiarerà come si deve comportare un animazione durante la sua intera durata, possiamo definire quindi gli step dell’animazione tramite una percentuale di completamento, ad esempio. Ecco la sintassi di KEYRAME
@keyframes NOME-ANIMAZIONE { 0% { opacity: 0; } 100% { opacity: 1; } } |
Come potrete notare, ogni insieme di regole contenute all’interno di una funzione KEYFRAME ha un nome che verrà richiamato nella regola ANIMATION. Le regole contenute all’interno delle percentuali verranno eseguite al completarsi dell’animazione: quando l’animazione raggiungerà il 50% di completamento essa assumerà quelle determinate regole dichiarate.
Nella nostra animazione personalizzata ispirata al Circo Parapiglia, faremo ondeggiare e andare avanti e indietro l’omino caratteristico del loro circo:
@keyframes Parapiglia{ 0% { left:-20%; transform: rotate(10deg); } 10% { left:10%; transform: rotate(8deg); } 15% { left:5%; transform: rotate(-8deg); } 50% { left:45%; transform: rotate(15deg); } 55% { left:40%; transform: rotate(-5deg); } 60% { left:55%; transform: rotate(8deg); } 100% { left:120%; } } |
Ovviamente all’interno di KEYFRAME possiamo inserire anche regole CSS3 avanzate come TRANSFORM, nel nostro caso la tenda si aprirà ruotando verso sinistra:
@keyframes TendaOpenSX{ 0% { transform: rotate(0deg); top:0; left:0; } 100% { transform: rotate(35deg); top:-60%; left:-80%; } } |
Un nota importantissima che riguarda KEYFRAME è la sua non compatibilità con tutti i browser. Inanzitutto i browser più datati non eseguiranno l’animazione, ma anche quelli di nuova generazione avranno bisogno dei Prefissi Vendor, che dichiareranno le regole in base al motore di rendering del browser. Ecco quindi come si trasforma la regola keyframe con il vendor per Google Chrome:
@-webkit-keyframes TendaOpenSX{ 0% { -webkit-transform: rotate(0deg); top:0; left:0; } 100% { -webkit-transform: rotate(35deg); top:-60%; left:-80%; } } |
Abbiamo visto come creare un animazione personalizzata con CSS3, vediamo ora come eseguirla.
Animazioni infinite con ANIMATION
La regola ANIMATION di CSS3 permette l’esecuzione di una determinata animazione ad uno specifico elemento. Essa verrà dichiarata all’interno di una classe o di un elemento ed avrà la seguente sintassi:
animation: NAME-YOUR-ANIMATION 5s infinite; |
Nel nostro esempio, utilizzeremo l’animazione creata in precedenza con KEYFRAME per l’omino del Circo Parapiglia:
.parapiglia{ animation: Parapiglia 10s linear 4s infinite alternate; } |
Essa eseguirà le regole dichiarate dentro l’animazione chiamata Parapiglia, durerà 10 secondi, avrà un timing lineare, avrà un delay di 4 secondi, si ripeterà all’infinito e in maniera alternata. Un animazione che si ripete in maniera alternata sarà un animazione che una volta eseguita verrà ripetuta nella maniera contraria, eseguendo al contrario le regole dichiarate. Anche la regola ANIMATION di CSS3 utilizza i prefissi vendor.
Per concludere, queste sono solo alcune delle semplici possibilità che ci offre CSS3, infatti potremmo creare animazioni personalizzate ancora più complesse e coinvolgenti, il limite è solo la fantasia!
