Il CSS3 ha inserito una serie di componenti dedicati all’animazione. Le istruzioni keyframes e animation permettono di animare facilmente gli elementi di una pagina web, conferendole un aspetto più professionale e moderno.
Vediamo una semplice struttura che incorpora queste istruzioni:
<!DOCTYPE html>
<html>
<head>
<title>Titolo del documento</title>
<style type="text/css">
@-webkit-keyframes coloreanimato {
0% { background-color:#FF0000; }
50% { background-color:#0000FF; }
100% { background-color:#00FF00; }
}
div.animato{
-webkit-animation-name: coloreanimato 5s infinite alternate 0s linear;
}
</style>
</head>
<body>
<div class="animato">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.</div>
</body>
</html>
Questa scrittura non è supportata da tutti i browser, in particolare la presente funziona bene su Google Chrome e Safari. Il risultato del codice rappresentato è il seguente:
Analizziamo il codice:
@-webkit-keyframes coloreanimato
Definisce i keyframe o fotogrammi chiave della’animazione, in questo caso un’animazione della lunghezza 100% ha 3 chiavi, all’inizio 0%, a metà 50%, alla fine 100%. Le parentesi graffe delimitano i valori di questa proprietà.
Il nome di questa sequenza è coloreanimato.
Assegno a div la classe animato, per evitare che tutti i div della pagina presentino l’animazione. Se si osserva il contenuto della pagina tra i tag body ho assegnato al div la classe animato.
-webkit-animation-name: coloreanimato 5s infinite alternate 0s linear;
L’istruzione è tipica dei browser basati su webkit (il motore di rendering di Safari e Chrome). L’animazione richiama i keyframe coloreanimato, dura 5 secondi (il 100% indicato prima è 5 secondi), si ripete all’infinito (è possibile specificare anche un numero intero di volte), è di tipo alternato (si esegue nella sequenza 0%-50%-100%-50%-0% e così via…), si avvia con un ritardo di 0 secondi, l’interpolazione dell’animazione è lineare.
