Tutoriales
Usar animaciones
1. Animaciones de entrada comunes
Desvanecer:
{
"animations": [
{ "type": "fadeIn", "duration": 0.4 }
]
}Deslizar:
{
"animations": [
{
"type": "slideIn",
"direction": "up",
"distance": 120,
"duration": 0.6
}
]
}Zoom de entrada:
{
"animations": [
{
"type": "zoomIn",
"duration": 0.5,
"easing": "easeOutBack"
}
]
}2. Movimiento continuo
{
"animations": [
{
"type": "scale",
"from": 1,
"to": 1.08,
"duration": 0.8,
"loop": true,
"easing": "easeInOutSine"
}
]
}3. Combina animaciones con cuidado
Es normal combinar:
fadeIn + slideInfadeIn + zoomInscale + move
Evita apilar demasiados efectos de entrada en un mismo clip, salvo que el estilo lo requiera.
4. Keyframes vs animaciones
Usa animations cuando:
- quieras un preset de movimiento con nombre
- quieras una autoría más rápida
Usa keyframes cuando:
- necesites cambios exactos de valor en momentos exactos
- necesites curvas personalizadas de propiedades
5. Documentos relacionados
- Referencia completa de timing: Animaciones, keyframes y transiciones
- Fragmentos útiles: Ejemplos