Animaciones CSS: Uso de keyframes con la propiedad

animation - Eniun

ttps://www.eniun.com/animaciones-css-keyframes-

propiedad-animation/
1. Diferencias entre las
propiedades animation,
transition y transform
En una sección anterior vimos cómo hacer transiciones y transformaciones en CSS3
sobre los elementos de nuestra página web. Veamos las diferencias entre esas dos
propiedades y animation.
  La propiedad transition en CSS permite controlar la transición entre los
diferentes estados de un elemento cuando se modifican sus propiedades. Es
comúnmente utilizada para crear efectos suaves al interactuar con elementos,
como al pasar el cursor sobre ellos (:hover). Las propiedades más comunes sujetas
a transiciones incluyen cambios en el color de fondo, dimensiones y tamaño de
texto, entre otros.
 La propiedad transform se utiliza para modificar la apariencia visual de un
elemento en el espacio, como su posición, escala, rotación o inclinación. A
diferencia de transition y animation , transform no controla la animación
entre estados, sino que cambia directamente la apariencia del elemento de forma
inmediata. Sin embargo, transform se puede combinar
con transition o animation para crear efectos más complejos y animados.
 La propiedad animation en CSS permite crear animaciones más complejas y
controladas, ya que permite definir secuencias de fotogramas de animación con la
regla @keyframes . Con animation , se pueden especificar múltiples estados
intermedios en una animación, así como controlar la duración, la dirección, la
repetición y otros aspectos de la animación de forma más detallada que
con transition .

2. Animaciones CSS con

propiedad animation
En este apartado veremos cómo encadenar diferentes animaciones utilizando la
propiedad animation y sus subpropiedades. Para ello, definiremos la
propiedad animation sobre nuestros selectores y después definiremos nuestra
secuencia de animación mediante @keyframes.
Cuando trabajamos con animaciones en CSS, podemos optar por usar la propiedad
abreviada animation , que incluye todas las configuraciones en una sola línea, o
podemos utilizar las subpropiedades de animation de forma individual para tener un
mayor control sobre cada aspecto de la animación.

2.1. Sintaxis propiedad animation

La propiedad animation engloba todas las subpropiedades relacionadas con la
animación en CSS, por lo que sería la propiedad abreviada. Las subpropiedades
permiten controlar aspectos específicos de la animación, como su nombre, duración,
dirección, relleno, etc.
selector {
animation: name duration timing-function delay iteration-count direction fill-mode play-
state;
}

1. name : Especifica el nombre de la regla @keyframes que describe los fotogramas

de la animación.
 2. duration : Indica la cantidad de tiempo que la animación consume en completar
su ciclo. Se expresa en segundos (s) o milisegundos (ms).
3. timing-function : Define el ritmo de la animación, es decir, cómo se muestran
los fotogramas a lo largo del tiempo. Puede ser lineal, ease, ease-in, ease-out,
ease-in-out, cubic-bezier, step-start, step-end, steps, etc.
4. delay : Especifica un tiempo de espera antes de que la animación comience a
ejecutarse. Se expresa en segundos (s) o milisegundos (ms).
5. iteration-count : Indica el número de veces que se repetirá la animación.
Puede ser un número entero, infinite para que se repita infinitamente, o un
valor específico como 2 , 3 , etc.
6. direction : Define si la animación debe retroceder hasta el fotograma de inicio
al finalizar la secuencia. Puede ser normal , reverse , alternate ,
o alternate-reverse .
7. fill-mode : Especifica qué valores tendrán las propiedades después de finalizar
la animación. Puede ser none , forwards , backwards , o both .
8. play-state : Permite pausar y reanudar la secuencia de la animación. Puede
ser running o paused .

2.2. Subpropiedades de animation

Si optamos por usar las subpropiedades, comenzamos añadiendo la
propiedad animation-name al selector, a la cual le asignamos un nombre
identificativo, denominado identifier . Luego, podemos utilizar las demás
subpropiedades para ajustar diferentes aspectos de la animación, como la duración,
dirección, entre otros.
Sintaxis:
selector{
animation-name: identifier;
subproperty: value;
}
Las subpropiedades de animation son:
 animation-name Especifica el nombre de la regla @keyframes que describe los
fotogramas de la animación.
 animation-delay Tiempo de retardo entre el momento en que el elemento se
carga y el comienzo de la secuencia de la animación.
 animation-direction Indica si la animación debe retroceder hasta el fotograma
de inicio al finalizar la secuencia.
 animation-duration Indica la cantidad de tiempo que la animación consume en
completar su ciclo (duración).
 animation-iteration-count El número de veces que se repite. Podemos
indicar infinite para repetir la animación indefinidamente.
  animation-play-state Permite pausar y reanudar la secuencia de la animación.
 animation-timing-function Indica el ritmo de la animación, es decir, como se
muestran los fotogramas de la animación, estableciendo curvas de aceleración.
 animation-fill-mode Especifica qué valores tendrán las propiedades después
de finalizar la animación (los de antes de ejecutarla, los del último fotograma de
la animación o ambos).

2.3. Valores de las subpropiedades

de animation
Cada subpropiedad de animation juega un papel crucial en la definición de cómo se
comporta la animación. A continuación, desglosamos cada una con sus posibles valores
y ejemplos de uso:
 animation-name
Esta subpropiedad vincula el selector con una regla @keyframes . Los
identificadores que utilizamos deben ser únicos.
.mi-elemento {
animation-name: mi-animacion;
}
@keyframes mi-animacion {
from { opacity: 0; }
to { opacity: 1; }
}

 animation-delay
Determina un tiempo de espera antes de que la animación comience.
.mi-elemento {
animation-delay: 500ms; /* Espera medio segundo antes de comenzar */
}

 animation-direction
Indica si la animación debe alternar la dirección en cada ciclo.
Valores: normal , reverse , alternate , alternate-reverse .
.mi-elemento {
animation-direction: alternate; /* Va y viene */
}

 animation-duration
Establece cuánto tiempo toma completar un ciclo de la animación, se expresa en
segundos (s) o milisegundos (ms).
.mi-elemento {
animation-duration: 2s; /* Completa la animación en 2 segundos */
}

 animation-iteration-count
Define cuántas veces se repetirá la animación. infinite para una animación sin
fin.
.mi-elemento {
animation-iteration-count: infinite; /* Repite la animación indefinidamente */
}

 animation-play-state
Permite pausar y reanudar la reproducción de la animación.
Valores: running , paused .
.mi-elemento:hover {
animation-play-state: paused; /* Pausa la animación al pasar el mouse */
}

 animation-timing-function
Controla el ritmo de la animación, definiendo cómo se acelera y desacelera
durante su ejecución.
Valores: linear , ease , ease-in , ease-out , ease-in-out , cubic-
bezier(n,n,n,n) .

.mi-elemento {
animation-timing-function: ease-in-out; /* Comienza lentamente, se acelera en el medio, y
termina lentamente */
}

 animation-fill-mode
Decide los estilos que se aplican a un elemento antes y después de su animación.
Valores: none , forwards , backwards , both .
.mi-elemento {
animation-fill-mode: forwards; /* Mantiene los estilos del último keyframe después de
finalizar */
}

3. Animaciones CSS: Uso de

@keyframes
Una vez añadida la propiedad animation a nuestro selector, haremos uso de
los @keyframes para crear animaciones completas.
Los @keyframes son un conjunto de fotogramas clave que describen cómo se muestra
cada elemento animado durante la secuencia de la animación. La sintaxis es la siguiente:

@keyframes identifier {
from {
...
}
percentage {
...
}
to {
...
}
}

 identifier Nombre que identifica la lista de keyframe. Debe coincidir con

animation-name.
 from Desde (por ejemplo: desde 0%).
 to Hasta (por ejemplo hasta 100%).
 percentage Porcentaje intermedio de las veces que va a ocurrir una animación.
Ver descripción completa de propiedades

4. Ejemplos animaciones CSS con

propiedad animation
Veamos mejor las propiedades y valores explicados anteriormente mediante varios
ejemplos.

4.1. Rotación de forma indefinida

Vamos a hacer una animación mediante @keyframes de nuestro logo, de forma que se
encuentre rotando de forma indefinida. Para ello vamos a utilizar la
propiedad transform y le daremos varios valores a su rotación: crearemos una
animación con tres keyframes: uno inicial que tendrá rotación de 0 grados, otro en el
50% que tendrá una rotación sobre el eje y de 180 grados y uno final que volverá a tener
una rotación de 0 grados.
Código html:

<img class="animacionLogo" src="eniun.png">

Código CSS:

.animacionLogo {
animation-duration: 5s;
animation-name: animLogo;
 animation-iteration-count: infinite;
}
@keyframes animLogo{
from {
-webkit-transform: rotate(0deg);
transform: rotateY(0deg);
}
50%{
-webkit-transform: rotate(180deg);
transform: rotateY(180deg);
} to {
-webkit-transform: rotate(360deg);
transform: rotateY(360deg);
}
}

Ejemplo completo en CodePen:

4.2. Deslizar un texto por el

navegador
Ahora haremos una animación de un párrafo que se deslizará por el navegador desde el
borde derecho de la ventana:

Código CSS:

p {

animation-duration: 4s;

animation-name: animTexto;
margin: 20px;
}
@keyframes animTexto {
from {
margin-left: 100%;
width: 100%;
}
to {
margin-left: 0%;
width: 100%;
}
}

Ejemplo completo en CodePen:

4.3. Animación de una pelota

botando
Veamos un ejemplo de una animación que simula una pelota botando. En esta
animación, la .bouncing-ball comienza en su posición original, se traslada 100
píxeles hacia arriba y luego vuelve a caer. La animación tiene una duración de 2
segundos y se repite infinitamente. Los animation-timing-function de ease-
in y ease-out se aplican en los puntos clave para simular la aceleración y
desaceleración de la pelota al rebotar.
Puedes ajustar la altura del rebote ( translateY(-100px) ) y la duración de la
animación para cambiar la apariencia del rebote. La forma redondeada de la pelota se
logra con border-radius: 50% .
Código CSS:

.bouncing-ball {

width: 50px;

height: 50px;

background-color: #3498db;

border-radius: 50%;

animation-name: bouncing;
animation-duration: 2s;
animation-timing-function: ease-in-out;
animation-iteration-count: infinite;
margin: 100px auto;
}

@keyframes bouncing {
0%, 100% {
transform: translateY(0);
animation-timing-function: ease-in;
}
50% {
transform: translateY(-100px);
animation-timing-function: ease-out;
}
}

Ejemplo completo en CodePen:

4.4. Animación de una rueda

girando
A continuación se muestra un ejemplo de cómo crear una animación de una rueda
girando usando CSS y la propiedad animation . Esta animación hace que el
elemento .spinning-wheel gire continuamente. La rueda es representada por un div
circular con un borde sólido y un border-top-color transparente para dar la
apariencia de una rueda. La animación spin rota la rueda 360 grados indefinidamente.
El tiempo de duración de la rotación es de 2 segundos y linear asegura que la
velocidad de la animación sea constante.
Puedes ajustar el tamaño de la rueda, el grosor del borde y la duración de la animación
para personalizar la apariencia y el comportamiento de la rueda giratoria.

Código CSS:

.spinning-wheel {

width: 100px;

height: 100px;

border-radius: 50%;

border: 10px solid #3498db;

border-top-color: transparent;

animation-name: spin;
animation-duration: 2s;
animation-timing-function: linear;
animation-iteration-count: infinite;
}

@keyframes spin {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(360deg);
}
}

Ejemplo completo en CodePen:

4.5. Animación de un indicador de

carga
Veamos una animación que simule un indicador de carga que aumenta de tamaño y
cambia de color durante la animación. La animación se ejecuta con una duración de 2
segundos, tiene un retraso de 0.5 segundos antes de iniciar y se repite infinitamente.
Además, alterna la dirección en cada iteración y utiliza la función de tiempo ease-in-
out para una transición suave. Finalmente, la propiedad animation-fill-mode con
el valor both asegura que el círculo mantenga el estado final después de completar la
animación.
Código CSS:
body {

display: flex;

justify-content: center;

align-items: center;

min-height: 100vh;

margin: 0;

background-color: #f5f5f5;

.loading-indicator {

width: 50px;

height: 50px;

background-color: blue;

border-radius: 50%;

animation-name: scaleAndColorChange;
animation-duration: 2s;
animation-timing-function: ease-in-out;
animation-delay: 0.5s;
animation-iteration-count: infinite;
animation-direction: alternate;
animation-fill-mode: both;
}

@keyframes scaleAndColorChange {
0% {
transform: scale(1);
background-color: blue;
}
100% {
transform: scale(2);
background-color: green;
}
}

Ejemplo completo en CodePen:

4.6. Animación de un latido de
corazón
Veamos un ejemplo de una animación de «latido del corazón» que puede ser útil para
resaltar elementos interactivos como botones de donación, alertas importantes o
cualquier elemento que desees destacar en tu página web.

Código CSS:

.heart-beat {

font-size: 50px;

color: red;

text-align: center;

animation: heartbeat 1s infinite;

@keyframes heartbeat {

0% {

transform: scale(1);

25% {

transform: scale(1.2);

50% {

transform: scale(1);

75% {

transform: scale(1.2);

}
 100% {

transform: scale(1);

Ejemplo completo en CodePen:

Ver más ejemplos de animaciones

Comprueba tu apendizaje
Ejercicio propuesto
Configura diferentes animaciones en alguno de los elementos de tu proyecto web. Por
ejemplo, podrías hacer que alguno de los textos e imágenes se muevan desde la derecha
de la pantalla del navegador hasta su posición base cuando se recarga la pantalla.
También podrías hacer que algún elemento modifique su tamaño y su posición durante
un determinado tiempo, etc.

Navegación de entradas
← Transformaciones en CSS: rotar, torcer, escalar o deplazar
Centrar horizontal y verticalmente en CSS un elemento →

Curso CSS Avanzado

 1. Variables CSS
 2. Gradientes
 3. Transiciones
 4. Transformaciones
 5. Animaciones con animation
 6. Funciones matemáticas
 7. CSS Grid
 8. Centrar horizontal y verticalmente un elemento
 9. Modo oscuro y claro con CSS
 10. Tooltip en CSS: Pasos para crear tooltips
 11. CSS clamp(): Tipografía fluida
 12. CSS line-clamp: Acortar texto a un número de líneas
 13. Scroll Snap en CSS: Controla el desplazamiento
 14. scroll-behavior CSS: desplazamiento suave entre marcadores
 15. Blend Modes CSS
 16. Hyphens CSS
 17. Filtros
 18. Preprocesadores CSS: Less y Sass
 19. Prácticas CSS
 20. Chuleta CSS Nivel avanzado
 21. Tutorial de Sass
 22. Exámenes HTML y CSS avanzado
Ver más cursos

¡Invítanos a un café!
¡Invítanos a un café!
¿Cómo donar?
Ayúdanos a seguir creando contenido relacionado con la informática y el diseño y
desarrollo web en Eniun. ¡Gracias por tu apoyo!