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!
Animaciones en CSS (CSS Animation)
Gracias a esta guía aprenderás sobre las siguientes propiedades:
- @keyframes
- animation-name
- animation-duration
- animation-delay
- animation-iteration-count
- animation-direction
- animation-timing-function
- animation-fill-mode
- animation
¿Qué son las Animaciones en CSS (CSS Animations)?
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!
La regla @keyframes
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;
}Retrasar una animación en CSS (animation-delay)
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;
}Establecer cuántas veces debe ejecutarse una animación en CSS
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;
}Ejecutar animación en dirección inversa o ciclos alternos en CSS
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:
- normal – La animación se reproduce de forma normal (hacia adelante). Este es el valor por defecto
- reverse – La animación se reproduce en sentido inverso (hacia atrás)
- alternate – La animación se reproduce primero hacia adelante y luego hacia atrás
- alternate-reverse – La animación se reproduce primero hacia atrás y luego hacia adelante.
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;
}Especificar la Curva de Velocidad de la Animación en CSS
La propiedad animation-timing-function especifica la curva de velocidad de la animación.
La propiedad animation-timing-function puede tener los siguientes valores:
- ease – Especifica una animación con un inicio lento, luego rápido, luego termina lentamente (este es el valor por defecto)
- linear – Especifica una animación con la misma velocidad desde el inicio hasta el final
- ease-in – Especifica una animación con un inicio lento
- ease-out – Especifica una animación con un final lento
- ease-in-out – Especifica una animación con un inicio y un final lentos
- cubic-bezier(n,n,n,n) – Le permite definir sus propios valores en una función cubic-bezier
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;}Especificar el modo de relleno para una animación en CSS
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:
- none: valor predeterminado. La animación no aplicará ningún estilo al elemento antes o después de que se ejecute
- forwards: el elemento conservará los valores de estilo establecidos por el último fotograma clave (depende de la dirección de la animación y el número de iteraciones de la animación)
- backwards: el elemento obtendrá los valores de estilo establecidos por el primer fotograma clave (depende de la dirección de la animación) y los conservará durante el período de retraso de la animación.
- both: la animación seguirá las reglas para avanzar y retroceder, extendiendo las propiedades de la animación en ambas direcciones.
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;
}Propiedad abreviada de animación en CSS
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;
}Propiedades de animation en CSS
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 |
Errores que debes de evitar al realizar animaciones en CSS
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:
- No usar el prefijo -webkit- para las propiedades de animación, ya que puede causar problemas de compatibilidad con algunos navegadores como Safari, Chrome e iOS.
- No abusar de las animaciones complejas o innecesarias, ya que pueden afectar al rendimiento y la usabilidad de la página web.
- No te olvides cerrar las llaves «{ }» y poner los «;» al final de cada instrucción o las animaciones no te funcionarán.
Conclusión sobre las Animaciones en CSS
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!