Animación de lista tipo Material Design con Javascript

En esta ocasión comparto con ustedes una animación que estuve buscando, y lamentablemente no la encontré.
Se trata de una animación de Lista como lo hace Android Lollipop. Manos a la obra.

Comencemos

En el editor de tu preferencia debes crear un archivo llamado index.html con el siguiente contenido.



Así mismo crearemos un archivo llamado main.js con el siguiente contenido:



De igual forma creamos un archivo llamado style.css con el contenido siguiente:



El resultado final será este:

Conclusión

Las animaciones de los diversos dispositivos con los que actualmente convivimos pueden ser traducidas de una manera sencilla a la web.

También puede interesarte esta directiva para angular!