È davvero possibile creare delle animazioni su una pagina web utilizzando semplicemente CSS3?
La risposta è…certo che si!
Con l’arrivo di CSS3 i web designer hanno potuto iniziare ad inserire, all’interno dei loro progetti, delle splendide animazioni che prima venivano fatto in Flash o in Javascript.
Vediamo insieme allora come funzionano le animazioni con CSS3!
Per prima cosa dobbiamo definire un’animazione e darle un nome tramite la keywork @-keyframes, ed indicare in essa quali saranno i comportamenti dell’elemento che vogliamo animare.
Supponiamo di voler creare una semplice animazione, che cambi il colore di sfondo di un elemento continuamente:
@-keyframes "change-background"{
0%{
background: "blue";
}
25%{
background: "green";
}
50%{
background: "yellow";
}
75%{
background: "orange";
}
100%{
background: "red";
}
}La percentuale definita nell’animazione ci permette di decidere quando modificare l’elemento. In questo caso avremmo un cambio di background costante durante l’animazione, ma avremmo anche potuto decidere di far durare lo sfondo giallo più di quello arancione per esempio.
A questo punto, per poter utilizzare la nostra animazione fatta con CSS3, non ci resta altro da fare che richiamare la nostra animazione “change-background” all’interno della definizione CSS di un elemento.
Supponiamo di avere nella nostra pagina il seguente elemento HTML:
<div id="testElement">Test</div>Benissimo per completare e vedere la nostra animazione fatta con CSS3, non ci resta altro che scrivere il seguente codice CSS:
#testElement{
width:200px;
height:200px;
border: 1px solid #000;
animation-name: change-background; /* Nome dell'animazione da richiamare */
animation-duration: 10s; /* Durata dell'animazione */
animation-animation-iteration-count: infinite; /* Numero di ripetizioni dell'animazione, possiamo infatti decidere di far partire l'animazione solo 1 volta per esempio */
animation-timing-function: linear; /* Modo in cui l'animazione viene eseguita */
}Abbiamo visto in questo articolo quanto sia semplice creare un animazione in CSS3, infatti non ci sono limiti in termini di animazioni che si possono realizzare.
