Ejemplos CSS3 Animaciones (1)

Una de las nuevas funcionalidades de CSS3, son la posibilidad de hacer animaciones. Con la propiedad @keyframes podemos hacer que las diferentes propiedades que puede tener un objeto (color, width, height, left, right…) puedan ser animadas. Veamos con algunos ejemplos muy sencillos cómo funciona:

En el primer ejemplo de animación en CSS3, veremos cómo cambia de color un div:

See the Pen CSS3 Animation – Colour by Trescomatres (@trescomatres) on CodePen.

En este otro ejemplo de animación en CSS3 veremos cómo movemos un div:

See the Pen CSS3 Animation – Movement by Trescomatres (@trescomatres) on CodePen.

Por último haremos que la animación anterior, se repita repetidamente con una nueva propiedad

See the Pen CSS3 Animation – Movement iteration by Trescomatres (@trescomatres) on CodePen.

Por favor, revisad el código que hay en el CSS dónde encontraréis lo necesario para entender los ejemplos. Iremos poniendo más ejemplos para que podáis apreciar las posibilidades. Eso si, debéis tener en cuenta que únicamente los navegadores actualizados son capaces de interpretar CSS3.

Aquí tenéis algunos de nuestros ejemplos de código en CodePen

https://blog.trescomatres.com/tag/codepen-io/

Perfil de Trescomatres en CodePen.io

https://codepen.io/trescomatres/