Animazione di elementi HTML con CSS3

Tramite CSS3 è possibile creare delle animazioni di uno o più elementi HTML.
Questa demo permette di testare alcune delle funzionalità dei CSS relativi all'animazione visualizzando il relativo style sheet:
Per costruire un animazione servono due elementi nello style sheet:

• una gruppo di proprietà css che definiscono il tipo di animazione
• un elemento @keyframes, con un nome, che definisce i frame di cui è composta l'animazione

Gli attributi css che definiscono un animazione sono:

• animation-name: il nome del @keyframes con l'animazione da applicare
• animation-duration: definisce la lunghezza dell'animazione in secondi (s) o millisecondi (ms)
• animation-timing-function:definisce il tipo di animazione da applicare
• animation-iteration-count: il numero di iterazione di cui è composta l'animazione oppure infinite
• animation-direction: la direzione dell'animazione
• animation-play-state: lo stato dell'animazione (running / paused)
• animation-delay: il ritardo da applicare inizialmente prima che parta l'animazione
• animation-fill-mode: lo stato in cui si deve trovare l'animazione alla fine (non valido con animation-iteration-count impostato su infinite)
• transform-origin: il punto negli oggetti a cui fare riferimento per applicare la trasformazione (50% 50% = il centro)

A questo punto vanno definiti i punti chiave della trasformazione, questo lo si fa tramite l'attributo @keyframes. Con questo attributo è possibile specificare la trasformazione da applicare all'inizio (0%) e alla fine (100%) dell'animazione. In aggiunta è possibile definire un numero variabile di trasformazioni intermedie.

Le trasformazioni che si possono applicare sono varie, quelle prese in considerazione da questa demo sono:

• rotazione: ruota l'oggetto rispetto a trasform-origin ( es.: rotate(deg) -> rotate(360deg) )
• movimento: sposta un oggetto da un punto A a B ( es.: top: 10px; left: 20px -> top: 100px; left: -30px; )
• zoom: cambia le dimensioni dell'oggetto (es: width: 200px; -> width: 50px; )

Ad ogni frame indicato in @keyframes è possibile definire una o più trasformazioni. Il motore di rendering del browser si occupa di creare, in base alle impostazioni specificate, tutte le trasformazioni intermedie tra un frame e l'altro per rendere l'animazione fluida.