Cómo usar animaciones en CSS con ejemplos

Sigo reforzando mis puntos débiles en CSS y hoy es el turno de las animaciones.

CSS nos permite crear animaciones mediante la regla @keyframes. Con ella podemos definir el estado inicial de las propiedades y el tiempo que tomará la animación.

Podemos modificar el tamaño, color, visibilidad y muchas otras propiedades.

Crear mi animación con keyframes

Los keyframes necesitan un nombre y utilizan from y to para definir el inicio y el final de las propiedades que queremos modificar.

Por ejemplo, la animación myanimation cambia el radio del borde (border-radius) de 0 a 50%.

@keyframes myanimation {
	from {
		border-radius:0px
	}
	to {
		border-radius: 50%;
	}
}

DEMO

Conectar mis keyframes con un elemento

Mi elemento necesita conocer las propiedades animation-name y animation-duration.

animation-name: myanimation;
animation-duration: 3s;

DEMO

Otra forma de escribir la animación es usar porcentajes (%) en lugar de from y to, lo cual ofrece mayor flexibilidad para cambios futuros.

DEMO

Otras propiedades útiles son animation-delay y animation-iteration-count. No son obligatorias, pero nos ayudan a lograr efectos interesantes.

• animation-delay: inicia la animación después de un tiempo de espera.

• animation-iteration-count: define cuántas veces se ejecuta la animación. Por defecto es 1, pero puede cambiarse por otros valores numéricos o por infinite para que no se detenga.

A veces queremos que el elemento comience con el estado definido en el keyframe. Para estos casos usamos animation-fill-mode con el valor backwards.

animation-fill-mode: backwards;

Si quieres conservar el último estado del elemento, usa la opción fowards.

animation-fill-mode: fowards;

Para aplicar ambas situaciones usamos la palabra clave both.

animation-fill-mode: both;

¡Eso es todo!

Este es un repaso rápido sobre animaciones en CSS. Puedes experimentar con ellas y construir animaciones geniales como esta:

FINAL DEMO

Si te gustó este artículo, ¡compártelo!

Imagen gracias a Gensa Hub.