Propiedades CSS para Animaciones y Keyframes

En este artículo, tratará sobre las animaciones 📍. Para trabajar con ellos, es necesario saber qué propiedades existen, y a partir de ello, saber con cuáles trabajaremos.

En el siguiente enlace dando clic aquí, veremos una visión general de las animaciones con CSS 🧩.

Si bien no están todas, se encuentran las propiedades más recurrentes junto con su definición y sintaxis, increíble, ¿no? 👌

Propiedad animation-name 🤓

Animation puede tener solo un valor, o varios.

Con estas propiedades, le colocamos un nombre a la fracción de código que queremos animar, para que el keyframe sepa a quién debemos animar. ¿Keyframes?, este extraño nombre tiene una función indispensable en la creación de animaciones, así que veremos una breve definición a continuación 🤯.

Keyframes 🎯

Básicamente el uso de la directiva @keyframes te permite definir el comportamiento de tu animación punto por punto, y cualquier elemento puede usar esta animación por medio de la regla animation-name.

Dentro de @keyframes especificamos cada punto de nuestra animación por medio de porcentajes 💎. Podríamos tener un @keyframes de esta forma:

@keyframes jump {

    /* Punto A */
    0% {
    }

    /* Punto B */
    40% {
    }

    /* Punto C */
    60% {
    }

    /* Punto D */
    90% {
    }

}

Los porcentajes pueden ser los que tú quieras, pero lo más importante a tener en cuenta es que mientras más cerca esté un porcentaje de otro más rápido será la transición de un punto a otro 😄.

¡Vamos al código! ✨

Principios para animar los ojos 👀

Una vez nos encontremos dentro de nuestro editor, nos dirigiremos a la etiqueta \style y dentro de la clase .head__eye, ingresaremos la propiedad animation-name y la daremos como valor blink, así como en el siguiente ejemplo 👇.

Una vez le hayamos dado dicha propiedad, procederemos a escribir el @keyframe, para empezar a modelar la animación que queremos con el conejito. Seguido del valor que le dimos a la propiedad animation-name hace un momento y sus llaves {}.

Una vez dentro, escribiremos los porcetanjes, que significan en que tiempo de la animación queremos que surjan los cambios, también podemos colocar from o to, para indicar que se modifique ni bien inicio o finalice nuestra animación 🎊. Así como en el siguiente ejemplo:

Hemos visto, como agregarle nombre a nuestras animaciones y saber como agregar keyframes. Nos vemos en el siguiente artículo para hablar de Animation duration. Te esperamos 💚.

Contribución creada con los aportes de:Angel David Osorio Leyva