Las animaciones en CSS son una forma de darle movimiento y dinamismo a tu web. Con ellas puedes crear efectos visuales que llamen la atención de tus visitantes y mejoren su experiencia de usuario.
Además, son muy fáciles de implementar con solo unas líneas de código. En este artículo te voy a enseñar qué son las animaciones en CSS, para qué sirven y cómo usarlas correctamente.
¡Sigue leyendo y descubre todo lo que puedes hacer con ellas!
Gracias a esta guía aprenderás sobre las siguientes propiedades:
Las animaciones en CSS son una herramienta que te permite crear movimiento en los elementos de una página web, cambiando sus estilos de forma gradual y controlada.
Con las animaciones en CSS puedes mejorar la experiencia del usuario, generar interacciones más claras y atractivas, y optimizar el rendimiento de tu sitio web.
Para crear una animación en CSS necesitas definir un estilo que describa la animación y un conjunto de fotogramas que indiquen el estado inicial y final de la animación, así como posibles puntos intermedios.
¿Quieres aprender a realizarlas? ¡Sigue leyendo!
En primer lugar es necesario que sepas que es un Keyframe en CSS.
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.
Cuando especifica estilos CSS dentro de la regla @keyframes, la animación cambiará gradualmente del estilo actual al nuevo estilo en ciertos momentos.
Para que una animación funcione, debe vincular la animación a un elemento.
El siguiente ejemplo vincula la animación "ejemplo" al elemento <div>.
La animación durará 4 segundos y cambiará gradualmente el color de fondo del elemento <div> de "rojo" a "amarillo":
/* Código Animación */@keyframes ejemplo {
from {background-color: red;}
to {background-color: yellow;}
}
/* El elemento que se aplicará a la animación */div {
width: 100px;
height: 100px;
background-color: red;
animation-name: ejemplo;
animation-duration: 4s;
}
Nota: La propiedad animation-duration define cuánto tiempo debe tardar en completarse una animación.
Si no se especifica la propiedad animation-duration, no se producirá ninguna animación porque el valor predeterminado es 0s (0 segundos).
En el ejemplo anterior, hemos especificado cuándo cambiará el estilo usando las palabras clave "desde" y "hasta" (que representa 0 % (inicio) y 100 % (completado)).
También es posible utilizar porcentaje. Al usar el porcentaje, puede agregar tantos cambios de estilo como desee.
El siguiente ejemplo cambiará el color de fondo del elemento <div> cuando la animación esté completa en un 25 %, en un 50 % y nuevamente cuando la animación esté completa en un 100 %:
/* Codigo Animación */@keyframes example {
0% {background-color: red;}
25% {background-color: yellow;}
50% {background-color: blue;}
100% {background-color: green;}
}
/* Elemento al que se aplica */div {
width: 100px;
height: 100px;
background-color: red;
animation-name: ejemplo;
animation-duration: 4s;
}
El siguiente ejemplo cambiará tanto el color de fondo como la posición del elemento <div> cuando la animación se haya completado en un 25%, en un 50% y de nuevo cuando la animación se haya completado en un 100%:
/* Código de la Animación */
@keyframes example {
0% {background-color:red; left:0px; top:0px;}
25% {background-color:yellow; left:200px; top:0px;}
50% {background-color:blue; left:200px; top:200px;}
75% {background-color:green; left:0px; top:200px;}
100% {background-color:red; left:0px; top:0px;}
}
/* Elemento al que se aplica */
div {
width: 200px;
height: 200px;
position: relative;
background-color: green;
animation-name: ejemplo;
animation-duration: 4s;
}
La propiedad animation-delay especifica un retardo para el inicio de una animación.
El siguiente ejemplo tiene un retardo de 2 segundos antes de iniciar la animación:
div {
width: 200px;
height: 200px;
position: relative;
background-color: blue;
animation-name: ejemplo;
animation-duration: 4s;
animation-delay: 2s;
}
También se permiten valores negativos. Si se utilizan valores negativos, la animación se iniciará como si ya hubiera estado reproduciéndose durante N segundos.
En el siguiente ejemplo, la animación se iniciará como si ya hubiera estado reproduciéndose durante 2 segundos:
div {
width: 200px;
height: 200px;
position: relative;
background-color: green;
animation-name: ejemplo;
animation-duration: 4s;
animation-delay: -2s;
}
La propiedad animation-iteration-count especifica el número de veces que debe ejecutarse una animación.
El siguiente ejemplo ejecutará la animación 3 veces antes de que se detenga:
div {
width: 200px;
height: 200px;
position: relative;
background-color: green;
animation-name: ejemplo;
animation-duration: 4s;
animation-iteration-count: 3;
}
El siguiente ejemplo utiliza el valor "infinito" para hacer que la animación continúe para siempre:
div {
width: 200px;
height: 200px;
position: relative;
background-color: red;
animation-name: ejemplo;
animation-duration: 4s;
animation-iteration-count: infinite;
}
La propiedad animation-direction especifica si una animación debe ser reproducida hacia adelante, hacia atrás o en ciclos alternos.
La propiedad animation-direction puede tener los siguientes valores:
El siguiente ejemplo ejecutará la animación en sentido inverso (hacia atrás):
div {
width: 300px;
height: 300px;
position: relative;
background-color: red;
animation-name: ejemplo;
animation-duration: 4s;
animation-direction: reverse;
}
El siguiente ejemplo utiliza el valor "alternate" para que la animación se ejecute primero hacia adelante y luego hacia atrás:
div {
width: 200px;
height: 200px;
position: relative;
background-color: blue;
animation-name: ejemplo;
animation-duration: 4s;
animation-iteration-count: 2;
animation-direction: alternate;
}
El siguiente ejemplo utiliza el valor "alternate-reverse" para que la animación se ejecute primero hacia atrás y luego hacia delante:
div {
width: 200px;
height: 200px;
position: relative;
background-color: red;
animation-name: ejemplo;
animation-duration: 4s;
animation-iteration-count: 2;
animation-direction: alternate-reverse;
}
La propiedad animation-timing-function especifica la curva de velocidad de la animación.
La propiedad animation-timing-function puede tener los siguientes valores:
El siguiente ejemplo muestra algunas de las diferentes curvas de velocidad que se pueden utilizar:
#div1 {animation-timing-function: linear;}
#div2 {animation-timing-function: ease;}
#div3 {animation-timing-function: ease-in;}
#div4 {animation-timing-function: ease-out;}
#div5 {animation-timing-function: ease-in-out;}
Las animaciones en CSS no afectan a un elemento antes de que se reproduzca el primer fotograma clave o después de que se reproduzca el último fotograma clave. La propiedad animation-fill-mode puede anular este comportamiento.
La propiedad animation-fill-mode especifica un estilo para el elemento de destino cuando la animación no se está reproduciendo (antes de que comience, después de que finalice o ambos).
La propiedad animation-fill-mode puede tener los siguientes valores:
El siguiente ejemplo permite que el elemento <div> conserve los valores de estilo del último fotograma clave cuando finaliza la animación:
div {
width: 200px;
height: 200px;
background: blue;
position: relative;
animation-name: ejemplo;
animation-duration: 3s;
animation-fill-mode: forwards;
}
El siguiente ejemplo permite que el elemento <div> obtenga los valores de estilo establecidos por el primer fotograma clave antes de que comience la animación (durante el periodo de retardo de la animación):
div {
width: 200px;
height: 200px;
background: yellow;
position: relative;
animation-name: ejemplo;
animation-duration: 3s;
animation-delay: 2s;
animation-fill-mode: backwards;
}
El siguiente ejemplo permite que el elemento <div> obtenga los valores de estilo establecidos por el primer fotograma clave antes de que comience la animación, y conserve los valores de estilo del último fotograma clave cuando finalice la animación:
div {
width: 200px;
height: 200px;
background: green;
position: relative;
animation-name: ejemplo;
animation-duration: 3s;
animation-delay: 2s;
animation-fill-mode: both;
}
El siguiente ejemplo utiliza seis de las propiedades de animación:
div {
animation-name: ejemplo;
animation-duration: 5s;
animation-timing-function: linear;
animation-delay: 2s;
animation-iteration-count: infinite;
animation-direction: alternate;
}
El mismo efecto de animación anterior puede conseguirse utilizando la propiedad abreviada animation:
div {
animation: ejemplo 5s linear 2s infinite alternate;
}
La siguiente tabla muestra la regla @keyframes y todas las propiedades de animación CSS:
Propiedad | Descripción de la Propiedad en CSS |
@keyframes | Especifica el código de animación |
animation | Una propiedad abreviada para establecer todas las propiedades de animación |
animation-delay | Especifica un retardo para el inicio de una animación |
animation-direction | Especifica si una animación debe reproducirse hacia delante, hacia atrás o en ciclos alternos. |
animation-duration | Especifica cuánto tiempo debe tardar una animación en completar un ciclo |
animation-fill-mode | Especifica un estilo para el elemento cuando la animación no se está reproduciendo (antes de que comience, después de que termine, o ambos) |
animation-iteration-count | Especifica el número de veces que debe reproducirse una animación |
animation-name | Especifica el nombre de la animación @keyframes |
animation-play-state | Especifica si la animación está en ejecución o en pausa |
animation-timing-function | Especifica la curva de velocidad de la animación |
Aunque las animaciones en CSS son muy fáciles de implementar, también pueden tener algunos inconvenientes si no se hacen correctamente.
Por eso, es importante que evites estos errores comunes que pueden arruinar tu trabajo:
Espero que este artículo te haya servido para aprender más sobre las animaciones en CSS y cómo puedes usarlas para mejorar tu web.
Como has visto, las animaciones en CSS son una herramienta muy poderosa y versátil que te permite crear efectos sorprendentes con solo unas líneas de código.
Además, son muy fáciles de implementar y personalizar según tus necesidades.
Recuerda seguir los consejos que te hemos dado para evitar los errores más comunes y lograr un resultado profesional.
Por último, te gustaría aprender a crear formas geométricas en CSS, pues no te pierdas el artículo que he preparado en el blog.
Si te ha gustado este artículo, compártelo con tus amigos y déjanos un comentario con tu opinión. ¡Gracias por leernos!
¿Quieres poner texto detrás de un video? Aprende cómo con CapCut en este sencillo tutorial…
Aprende a crear voces con IA sorprendentemente reales para vídeos, podcasts y más. Lee nuestro…
TikTok se reinventa con TikTok Notes: una app de fotos y estilo de vida. Conoce…
¡Descubre Haiper! La alternativa gratuita a Sora de OpenAI para crear vídeos increíbles. Fácil de…
¿Buscas una alternativa a ChatGPT? Mistral AI y su chatbot Le Chat ofrecen una experiencia…
Más que un resumen: Adobe AI Assistant te ayuda a navegar y comprender PDFs con…
Esta página utiliza cookies para mejorar su rendimiento