Passaggio all'ora solare 27 ottobre 2019 03:0002:00 sposta indietro l'orologio di 1 ora (si dorme 1 ora in più)
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:

La demo non è esaustiva e mostra solo alcune delle possibilità.
Il pulsante Applica resetta la trasformazione, utile, ad esempio, nel caso di cambiamento della proprietà animation-timing-function.
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.