Animazioni con css keyframes

Ognuno si diverte come può.

E' possibile creare un'animazione usando solo i css e senza scomodare js.

Un caso d'uso che mi pare perfetto è quello di una lista paginata: partendo con qualche elemento si preme "more" e nuovi oggetti vengono aggiunti alla lista; così può essere utile evidenziare i nodi nuovi per un breve lasso di tempo.

  • Elemento #0
  • Elemento #1
  • Elemento #2
  • Elemento #3
  • Elemento #4

Per ottenere l'effetto basta che i nuovi elementi abbiano la classe che avvia l'animazione: banale come aggiungere una classe ad un elemento. :-)

Riferimenti: css-tricks.com ⬀, w3schools.com ⬀.

Nota a margine: con React.js l'esempio della lista funziona particolarmente bene perchè vengono aggiunti al DOM solo gli elementi nuovi. ;-)

2015-08-08