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
Aportes 16
Preguntas 4
Ordenar por:
¿Quieres ver más aportes, preguntas y respuestas de la comunidad?
☝ 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, por ejemplo, tomando en cuenta este ejemplo:
.
.
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 😄
.
En esta clase vimos cual es la diferencia entre las animaciones y las transiciones, ya que uno se puede llegar a confundir bastante, esto debido a que ambas suenan bastante similar e incluso se podría llegar a pensar que son sinónimos.
.
Diferencia entre transiciones y animaciones
Las transiciones solo pueden ir de un punto A a uno B en determinado tiempo. Sin embargo, en las animaciones, en el lapso de tiempo que va del punto A al B (osea, en el punto intermedio), puede haber ciertos movimientos.
.
.
Keyframes
Entonces, sabiendo cual es la diferencia entre las animaciones y transiciones, es hora de saber como los @keyframes nos ayudan a animar a nuestros elementos.
.
Un keyframe no es mas que una linea del tiempo que empieza desde el punto A y termina en el punto B. Nosotros le podemos decir a ese keyframe en que parte del “camino” modifique al elemento. Además de que nosotros le decimos cuantos segundos tiene que durar ese “viaje”.
Si por alguna razón alguien tiene problema para aplicar propiedad de movimiento como translate o rotate y no les funciona prueba haciendo flex o grid al contenedor padre, me paso que estas propiedad no funcionaban cuando los contenedores padres eran block.
La propiedad animation en CSS permite crear animaciones y especificar cómo se anima un elemento. Una animación se compone de dos partes principales: animation-name y @keyframes.
La propiedad animation-name se utiliza para especificar el nombre de la animación que se va a aplicar al elemento. Este nombre se corresponde con el identificador del conjunto de reglas de @keyframes que se definirá a continuación. El valor que se asigna a animation-name debe coincidir exactamente con el nombre especificado en la regla @keyframes.
La regla @keyframes se utiliza para definir cómo debe animarse un elemento en distintos momentos durante la duración de la animación. Para hacer esto, se definen uno o más conjuntos de reglas que indican los estilos que deben aplicarse a un elemento en distintos porcentajes de la duración de la animación. Cada conjunto de reglas se identifica con un nombre único que se corresponde con el valor asignado a animation-name.
Por ejemplo, supongamos que se quiere crear una animación en la que un elemento cambie de color gradualmente. Se podría definir una animación llamada “cambiocolor” con la siguiente sintaxis:
En este ejemplo, se define un conjunto de reglas llamado cambiocolor que especifica que el elemento debe tener un fondo rojo al principio de la animación, cambiar a amarillo al llegar al 50% de la duración y finalmente terminar con un fondo verde. Luego, se aplica la animación al elemento div con la propiedad animation-name y se establece la duración de la animación en 3 segundos con la propiedad animation-duration.
En resumen, animation-name y @keyframes son dos partes esenciales para crear animaciones en CSS. La primera define el nombre de la animación que se va a aplicar, mientras que la segunda define cómo se debe animar el elemento en distintos momentos durante la duración de la animación.
animation-name: Con esta 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: Se va de A a B con ciertas manipulaciones de por medio. Está es la diferencia crucial, que podemos manipular el tiempo desde el inicio hasta el final usando palabras clave como from y to para decir que solo desde el inicio hasta el final.
La diferencia principal entre keyframes y la propiedad animation en CSS es que los keyframes definen los distintos estados de una animación en diferentes momentos del tiempo, mientras que la propiedad animation aplica esos estados definidos por los keyframes a un elemento.
1. **Keyframes**: Utilizados para especificar cómo cambiará el estilo del elemento en varios puntos durante la animación. Se definen usando `@keyframes` y permiten establecer múltiples puntos de transición (por ejemplo, 0%, 50%, 100%).
2. **Animation**: Esta propiedad se usa para aplicar la animación a un elemento, indicando el nombre del conjunto de keyframes, la duración, la función de tiempo, y otras características como el número de iteraciones.
Así, los keyframes son los "pasos" de la animación, y la propiedad animation es cómo y cuándo se aplica esa animación a un elemento.
Básicamente el uso de la directiva @keyframes te permite definir el comportamiento de la animación punto por punto y de cualquier elemento puede user esta animación por medio de la regla animation-name.. Dentor de @keyframes espicificamos cada punto de nuestra animación por medio de porcentajes, por ejemplo, tomando en cuenta el ejemplo: .
**Diferencias entre Keyframes y transiciones**
Las **transiciones** CSS son más simples y se utilizan para animar cambios entre **dos** estados de un elemento, por su parte los **keyframes** permiten especificar **estados intermedios** en una animación, lo que brinda un mayor control sobre cada paso de la animación.
¿Quieres ver más aportes, preguntas y respuestas de la comunidad?