Aprenderemos a aplicar keyframes dentro de nuestro CSS para crear animaciones

Llevamos ya varias semanas desarrollando tutoriales para aprender un poco más de HTML y CSS. En uno de nuestros primeros tutoriales aprendimos cómo crear una pokébola, y en agradecimiento por la buena acogida, hoy aprenderemos a utilizar keyframes.

Ante todo, entender qué son y cómo funcionan los keyframes nos abre una serie de posibilidades al momento de darle vida a nuestras creaciones. Los keyframes o fotogramas clave son reglas CSS que se irán aplicando partiendo de un estado inicial de 0% hasta llegar a un estado final de 100%. Para usar keyframe dentro de nuestro CSS podemos declararlo de la siguiente manera: primero definimos un nombre para nuestra animación; luego, dentro de ella usamos porcentajes o usando palabras reservadas para establecer las propiedades CSS a cambiar como se visualiza en el siguiente ejemplo.

Es posible establecer más estados intermedios en los keyframes, no todo se reduce a 0 y 100%.

Ya definimos nuestros keyframes anteriormente y de seguro te preguntarás cóomo puedes usarlo en tu HTML o cómo hacer que no se repitan indefinidamente. Para ser capaces de usar los keyframes, debemos utilizar la propiedad animation y sus sub-propiedades, las cuales nos ayudarán a definir qué animación llamar, el tiempo de retraso, si se repetirá muchas veces, etc.

Veamos un poco estas sub-propiedades de animation.

animation-name

Es el nombre que le especificamos al keyframes, en el ejemplo anterior es “fondo”.

animation-duration

    Especifica la duración que tendrá nuestra animación, se expresa en segundos “s”.

animation-timing-function

    Especifica el progreso de la animación entre keyframes, utilizando curvas de aceleracion.

animation-iteration-count

    Especificamos el número de repeticiones que tendrá nuestra animación. Si queremos que se repita indefinidamente, le establecemos infinite.

animation-direction

    Establece si la animación debe ser en reversa o alternar.

animation-play-state

    Establece si una animación está funcionando o se encuentra en pausa. esto nos permitirá tener mayor control sobre nuestra animación.

animation-delay

    Establece el tiempo desde que se carga el elemento y da inicio de la animación.

animation-fill-mode

    Establecen los valores que se aplican a la animación antes y después de que se esté ejecutando.

Para entender mejor el funcionamiento de la sub-propiedades antes mencionadas vamos a hacer un pequeño ejemplo.

Este es solo un sencillo ejemplo de lo que pueden llegar a hacer con keyframes, solo queda usar nuestra imaginación y creatividad. ¡Es tu turno! Crea tu propio proyecto y cuéntanos cómo te fue. 

Recuerda también que en Devcode tenemos el curso de HTML y CSS, en el que podrás aprender desde cero los fundamentos de HTML y CSS, además de encontrar muchos otros cursos que complementarán tu aprendizaje. No olvides compartir el tutorial con tus amigos y dejarnos tus dudas u opiniones en la caja de comentarios. Este fue kusillus, ¡hasta la próxima!