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/

Artículos relacionados

CSS3 Animaciones – Efecto 3d sencillo Os dejamos dos ejemplos de animaciones con CSS3 en el que mostramos cómo simular efecto 3d de manera diferente. Por un lado la propiedad z-ind...
Ejemplos CSS3 Animaciones Transform Si ya vimos en el anterior artículo unos ejemplos sencillos de animaciones con CSS3, en éste veremos cómo utilizar la propiedad transform para crear ...

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *

*