Encadenamiento y secuenciación de animaciones
Cree secuencias complejas encadenando varias animaciones con retrasos escalonados.
Encadenamiento y secuenciación de animaciones es una lección gratuita de CSS 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 CSS Academy, y tu progreso se sincroniza en la web y la app de CoddyKit. El curso de CSS Academy incluye 4 lecciones en total.
¿Por qué encadenar animaciones?
Los efectos complejos de la interfaz suelen requerir varias animaciones que ocurren en orden: un elemento entra deslizándose, hace una pausa y después desaparece gradualmente. CSS ofrece varias herramientas para encadenar animaciones sin JavaScript.
Usar animation-delay para secuencias
La forma más sencilla de crear una secuencia consiste en calcular cuándo debe comenzar la siguiente animación según la duración de la anterior:
<div class="element">Slides in, then fades out</div>
Fotogramas clave de varios pasos
El enfoque más limpio para un solo elemento consiste en codificar toda la secuencia en una única regla @keyframes con puntos intermedios porcentuales:
<div class="toast">Notification toast</div>
Propiedades personalizadas CSS para la duración
Guarde las duraciones en variables CSS para coordinarlas fácilmente entre animaciones encadenadas:
<div class="box">Custom-property-driven timing</div>
animation-timeline (moderno)
La API Web Animations y las animaciones vinculadas al desplazamiento (ScrollTimeline) permiten crear secuencias sofisticadas sin calcular retrasos manualmente. Este es el futuro de la orquestación de animaciones CSS complejas.
Animación escalonada con propiedades personalizadas CSS
Controle los retrasos escalonados mediante propiedades personalizadas CSS establecidas en línea o a través de JavaScript:
<div class="item" style="--delay:0ms">Item 1</div>
<div class="item" style="--delay:120ms">Item 2</div>
<div class="item" style="--delay:240ms">Item 3</div>
Secuencias controladas por JavaScript
Para secuencias precisas con varios elementos, use la API Web Animations o una biblioteca como GSAP. CSS por sí solo tiene limitaciones para coordinar elementos independientes con interdependencias complejas.
Animaciones para llamar la atención
Una secuencia de animación que pulsa y después se estabiliza para llamar la atención:
<div class="notification">New message!</div>
Evento AnimationEnd
Escuche animationend en JavaScript para activar el siguiente paso mediante programación:
<div class="box" id="ae-box">Watch me</div>
<script>
const el = document.getElementById('ae-box');
el.addEventListener('animationend', (e) => {
if (e.animationName === 'slideIn') {
el.classList.add('phase-2');
el.textContent = 'animationend fired!';
}
});
</script>
Patrón de transición de página
Una secuencia de transición de página CSS mediante la alternancia de clases:
<div class="page-leaving">Leaving page</div>
<div class="page-entering">Entering page</div>
Esqueleto del estado de carga
Una animación de carga de esqueleto de varios pasos mediante desplazamientos:
<div class="skeleton-text"></div>
<div class="skeleton-text"></div>
<div class="skeleton-text"></div>
Comprobación rápida
¿Cuál es la mejor forma de codificar en CSS una secuencia de animación completa de varios pasos para un solo elemento?
Repaso
Las secuencias de animación CSS pueden usar retrasos calculados según las duraciones anteriores, reglas @keyframes de varios pasos con puntos intermedios porcentuales o variables de duración en propiedades personalizadas. El evento animationend permite activar fases secuenciales desde JavaScript. Para orquestaciones complejas con varios elementos, considere la API Web Animations.
Preguntas frecuentes
¿La lección «Encadenamiento y secuenciación de animaciones» es gratis?
Sí — el texto completo de «Encadenamiento y secuenciación de animaciones» 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 CSS Academy, actualiza a CoddyKit PRO. El curso de CSS Academy incluye 4 lecciones en total.
¿Qué aprenderé en «Encadenamiento y secuenciación de animaciones»?
Cree secuencias complejas encadenando varias animaciones con retrasos escalonados. Practicas CSS 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 CSS Academy?
No se requiere experiencia previa. CSS 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 «Encadenamiento y secuenciación de animaciones»?
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 CSS Academy?
Sí. Cada lección de CSS 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
- Sintaxis de @keyframes y propiedad animation
- Dirección, fill-mode e iteración de animaciones
- Encadenamiento y secuenciación de animaciones
- Animaciones accesibles con prefers-reduced-motion