Animaciones con @keyframes
Defina animaciones de varios pasos con @keyframes, asígnelas mediante la abreviatura animation y controle la iteración, la dirección y fill-mode.
Animaciones con @keyframes es una lección gratuita de Frontend Academy en CoddyKit. Esta es la lección 3 de 4. Puedes leer la lección completa abajo gratuitamente — luego la practicas en el navegador con un editor de código integrado y un tutor de IA 24/7. Forma parte de la ruta de aprendizaje de Frontend Academy, y tu progreso se sincroniza en la web y la app de CoddyKit. El curso de Frontend Academy incluye 4 lecciones en total.
Transiciones frente a animaciones
Las transiciones animan el paso entre dos estados cuando se produce un cambio. Las animaciones con @keyframes se ejecutan automáticamente, pueden repetirse, invertirse, reproducirse indefinidamente y definir varios pasos intermedios, sin necesidad de un activador.
Definición de @keyframes
Declare una secuencia de animación con @keyframes. Defina los estados mediante porcentajes (0%, 50%, 100%) o con las palabras clave from y to.
@keyframes fadeIn {
from { opacity: 0; transform: translateY(16px); }
to { opacity: 1; transform: translateY(0); }
}
@keyframes pulse {
0% { transform: scale(1); }
50% { transform: scale(1.05); }
100% { transform: scale(1); }
}La sintaxis abreviada animation
animation: name duration timing-function delay iteration-count direction fill-mode. Aplique la animación a un elemento mediante esta sintaxis abreviada.
.card {
animation: fadeIn 0.4s ease-out forwards;
}
.loader {
animation: pulse 1.5s ease-in-out infinite;
}animation-iteration-count
Establece cuántas veces se reproduce la animación. infinite la repite indefinidamente. Un número la reproduce exactamente esa cantidad de veces.
.spinner {
animation: spin 1s linear infinite;
}
.badge {
animation: bounce 0.6s ease 3; /* plays 3 times */
}animation-direction
normal (predeterminado): hacia delante cada vez. reverse: hacia atrás. alternate: hacia delante y después hacia atrás. alternate-reverse. alternate es ideal para crear efectos de ida y vuelta.
@keyframes swing {
from { transform: rotate(-15deg); }
to { transform: rotate(15deg); }
}
.pendulum {
animation: swing 1s ease-in-out infinite alternate;
}animation-fill-mode
Controla el estado del elemento antes y después de la animación. forwards: el elemento permanece en el estado del fotograma clave final. backwards: aplica el estado from durante el retraso. both: ambas opciones.
.entrance {
opacity: 0;
animation: fadeIn 0.5s ease 0.2s forwards;
/* stays visible (opacity: 1) after animation ends */
}animation-play-state
Pause y reanude animaciones con JavaScript alternando animation-play-state: paused | running.
// Pause:
element.style.animationPlayState = 'paused';
// Resume:
element.style.animationPlayState = 'running';Varias animaciones
Aplique varias animaciones a un elemento separándolas con comas. Cada animación se ejecuta de forma independiente.
.icon {
animation:
rotate 2s linear infinite,
pulse 1.5s ease-in-out infinite alternate;
}Animaciones escalonadas con animation-delay
Escalone los elementos de una lista incrementando el retraso de cada elemento. Las propiedades personalizadas de CSS facilitan esta tarea con JavaScript.
/* CSS */
.list-item {
animation: slideIn 0.3s ease forwards;
animation-delay: calc(var(--index) * 60ms);
}
/* JS */
list.querySelectorAll('.list-item').forEach((el, i) => {
el.style.setProperty('--index', i);
});will-change — Indicación para el navegador
will-change: transform indica al navegador que la propiedad se animará, lo que le permite promover el elemento a su propia capa del compositor con antelación. Úselo con moderación: demasiadas capas del compositor desperdician memoria de la GPU.
.animated {
will-change: transform; /* only while animating */
}
/* Remove will-change after animation: */
el.addEventListener('animationend', () => el.style.willChange = 'auto');Práctica: pantalla de carga esqueleto
Las pantallas de carga esqueleto usan una animación de brillo para indicar que el contenido se está cargando. Un degradado se desliza sobre las formas de marcador de posición.
@keyframes shimmer {
from { background-position: -200% 0; }
to { background-position: 200% 0; }
}
.skeleton {
background: linear-gradient(
90deg,
#e2e8f0 25%,
#edf2f7 50%,
#e2e8f0 75%
) 200% 0 / 200% 100%;
animation: shimmer 1.5s linear infinite;
}Comprobación rápida
¿Qué valor de animation-fill-mode hace que el elemento conserve el estado del fotograma clave final después de que termine la animación?
Repaso: animaciones con @keyframes
Defina la animación con @keyframes usando from/to o porcentajes. Aplíquela con la sintaxis abreviada animation. Use iteration-count para repetirla. Use alternate como dirección para crear efectos de ida y vuelta. Use fill-mode: forwards para conservar el estado final. Escalone las animaciones con animation-delay y variables CSS. Use fotogramas clave de transform y opacity para obtener animaciones compuestas fluidas.
Preguntas frecuentes
¿La lección «Animaciones con @keyframes» es gratis?
Sí — el texto completo de «Animaciones con @keyframes» es gratis para leer aquí en la web. Para practicarla de forma interactiva (editor de código integrado y tutor de IA 24/7) y desbloquear el resto del curso de Frontend Academy, actualiza a CoddyKit PRO. El curso de Frontend Academy incluye 4 lecciones en total.
¿Qué aprenderé en «Animaciones con @keyframes»?
Defina animaciones de varios pasos con @keyframes, asígnelas mediante la abreviatura animation y controle la iteración, la dirección y fill-mode. Practicas Frontend Academy con código real que ejecutas directamente en el navegador, y un tutor de IA 24/7 responde tus preguntas mientras trabajas en la lección.
¿Necesito experiencia previa para empezar Frontend Academy?
No se requiere experiencia previa. Frontend Academy en CoddyKit está estructurado para principiantes hasta estudiantes avanzados, así que puedes empezar aquí o desde el inicio y avanzar a tu ritmo. Esta es la lección 3 de 4.
¿Cuánto tiempo toma la lección «Animaciones con @keyframes»?
La mayoría de las lecciones de CoddyKit toman alrededor de 5–10 minutos. Cada una es compacta e interactiva, así que avanzas constantemente y retomas exactamente por donde dejaste en la web y la app.
¿Puedo escribir y ejecutar código en esta lección de Frontend Academy?
Sí. Cada lección de Frontend Academy incluye un editor de código integrado, así que escribes y ejecutas código real directamente en tu navegador y obtienes retroalimentación instantánea de IA — sin configuración local necesaria.
Todas las lecciones de este curso
- Propiedades personalizadas de CSS: declarar y actualizar
- Transiciones: propiedad duración temporización
- Animaciones con @keyframes
- Respetar prefers-reduced-motion