Tutorial básico de animaciones en CSS con @Keyframes

Buenas estimados Lagashers!

El día de hoy quería compartir con ustedes un conocimiento más del tipo que, por mi parte, considero fundamental para cualquier persona que desarrolle en web. Me refiero a la construcción de animaciones con keyframes.

Un keyframe es una regla de CSS que permite construir animaciones, y esto se logra aplicando una transición de un elemento DOM de un conjunto de reglas de estilo, a otro.

Funciona de la siguiente forma:Se declara la regla usando @keyframes y posterior a eso se le da un nombre a la animación. Luego se define el conjunto de reglas con el que empezará la animación (from) y el conjunto con el que terminará (to).

En el ejemplo, estamos empezando la animación con una opacidad de 0 hasta 1, lo que quiere decir que visualmente, veremos una especie de transición.

Hasta aquí todo muy bonito pero, como aplicamos este estilo a un elemento DOM? A continuación dejo un ejemplo de este keyframe operando

Como se habrán dado cuenta, el elemento con la clase main-container tiene el atributo animation en el cual le indicamos, el keyframe a utilizar, la duración del mismo en segundos y como parámetro opcional si quisiéramos que la animación itere de manera indefinida ( infinite).

Cabe destacar también que en CSS 3 existen etiquetas que cada navegador interpreta de forma diferente al no haber un estándar por el cual regirse. En el ejemplo te indico cuales son las etiquetas para usar en Chrome,Mozilla,IE y Safari.

.main-container {
-webkit-animation: nombreKeyframe 5s infinite;/* Safari 4+ */
-moz-animation: nombreKeyframe 5s infinite;/* Fx 5+ */
-o-animation: nombreKeyframe 5s infinite;/* Opera 12+ */
animation: nombreKeyframe 5s infinite;/* IE 10+, Fx 29+ */
}

Hasta el momento vamos super! Sin embargo si queremos lograr una animación más elaborada podemos usar más de una propiedad de css en el keyframe.

Veamos un ejemplo más complejo. Una animación que se mueve de manera lineal de una posición a otra, girando y además aplicando un efecto de desenfoque en su transcurso.

Básicamente es lo mismo, pero aplicamos atributos de transformación de elemento: translateX( Mueve el elemento en el eje X en un porcentaje en relación a su ancho) y rotate( Hace rotar el elemento en los X grados. La unidad es deg).

Además aplicamos un filtro para lograr el efecto de desenfoque: blur( Se mide en pixeles y lo que hace es que a más pixeles,más desenfocado el elemento)

Si nos ponemos creativos, podemos lograr efectos bastante interesantes, como una rueda de vehículo girar o una aurora boreal con el efecto de gradiente.

Los invito a crear sus propias animaciones, en lugar de bajar repositorios de npm que logran exactamente lo mismo, pero pesan 20 veces más 😅

Saludos colegas!!