Keyframes y animaciones escalonadas
Crear animaciones complejas y escalonadas
Keyframes y animaciones escalonadas es una lección gratuita de Angular Academy en CoddyKit. Esta es la lección 4 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 Angular Academy, y tu progreso se sincroniza en la web y la app de CoddyKit. El curso de Angular Academy incluye 4 lecciones en total.
Animaciones de varios pasos
Las transiciones simples van de A a B. Para movimientos de varios pasos (rebotes, pulsaciones y barridos de color), Angular ofrece keyframes; para animar muchos elementos en secuencia, ofrece stagger.
La función keyframes
keyframes recibe un array de pasos style, cada uno con un offset entre 0 y 1 que marca su posición a lo largo de la duración.
animate('1s', keyframes([
style({ opacity: 0, offset: 0 }),
style({ opacity: 0.5, offset: 0.3 }),
style({ opacity: 1, offset: 1 })
]))Comprender offset
offset es la fracción de la duración total. 0 es el inicio y 1 es el final. Los offsets deben aumentar a lo largo del array.
Un efecto de rebote
Los keyframes permiten sobrepasar la posición final y estabilizarse para crear un rebote.
keyframes([
style({ transform: 'translateY(0)', offset: 0 }),
style({ transform: 'translateY(-20px)', offset: 0.5 }),
style({ transform: 'translateY(0)', offset: 1 })
])Omitir los offsets
Si omite offset, Angular distribuye los keyframes uniformemente a lo largo de la duración.
keyframes([
style({ opacity: 0 }),
style({ opacity: 1 })
])La función query
Para animar los elementos secundarios de un host, use query para seleccionarlos dentro de una transición.
transition('* => *', [
query(':enter', [
style({ opacity: 0 })
])
])La función stagger
stagger aplica un desfase temporal entre la animación de cada elemento seleccionado, lo que crea un efecto en cascada.
query(':enter', [
style({ opacity: 0 }),
stagger(100, [
animate('300ms', style({ opacity: 1 }))
])
])Aplicar stagger a una lista
Combine query y stagger en un trigger del contenedor de la lista para que los elementos aparezcan gradualmente, uno tras otro.
trigger('listAnim', [
transition('* => *', [
query(':enter', [
style({ opacity: 0 }),
stagger(80, animate('250ms', style({ opacity: 1 })))
], { optional: true })
])
])La opción opcional
Pase { optional: true } a query para que la animación no produzca un error cuando no haya elementos coincidentes.
Stagger negativo
Un valor negativo en stagger invierte el orden y anima primero los últimos elementos, lo que resulta útil para las cascadas de salida.
stagger(-50, animate('200ms', style({ opacity: 0 })))Nota sobre el rendimiento
Aplicar stagger a muchos elementos puede resultar costoso. Mantenga cortas las duraciones por elemento y prefiera transform/opacity para mantener las animaciones en la GPU.
Comprobación rápida
Compruebe su comprensión de los keyframes y stagger.
Resumen
Ha aprendido que keyframes define movimientos de varios pasos mediante valores de offset, mientras que query + stagger animan muchos elementos en cascada. Use { optional: true } como medida de seguridad y prefiera propiedades compatibles con la GPU.
Preguntas frecuentes
¿La lección «Keyframes y animaciones escalonadas» es gratis?
Sí — el texto completo de «Keyframes y animaciones escalonadas» 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 Angular Academy, actualiza a CoddyKit PRO. El curso de Angular Academy incluye 4 lecciones en total.
¿Qué aprenderé en «Keyframes y animaciones escalonadas»?
Crear animaciones complejas y escalonadas Practicas Angular 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 Angular Academy?
No se requiere experiencia previa. Angular 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 4 de 4.
¿Cuánto tiempo toma la lección «Keyframes y animaciones escalonadas»?
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 Angular Academy?
Sí. Cada lección de Angular 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
- Conceptos básicos de animación: trigger y state
- Transiciones y temporización
- Animaciones de entrada y salida
- Keyframes y animaciones escalonadas