Activador
.animate es la clase base que prepara el elemento para recibir
una animación del sistema.
Animations
Animations reúne el sistema de movimiento del framework: duración, delay, repetición, transiciones de opacidad y desplazamiento, con una base accesible para interfaces más cuidadas.
Qué resuelve animations
El módulo animations define un sistema mínimo de movimiento reutilizable dentro del framework. Su objetivo es permitir entradas suaves, desplazamientos sutiles y variaciones temporales sin mezclar esta lógica con layout, spacing o estilos de proyecto.
No está pensado para animaciones complejas específicas de una marca o una página, sino para patrones de movimiento generales y consistentes.
Referencia del archivo
.animate {
animation-duration: var(--anim-duration, 1s);
animation-delay: var(--anim-delay, 0s);
animation-fill-mode: both;
animation-timing-function: ease;
}
.infinite {
animation-iteration-count: infinite;
}
.anim-fast { --anim-duration: 0.5s; }
.anim-normal { --anim-duration: 1s; }
.anim-slow { --anim-duration: 2s; }
.anim-slower { --anim-duration: 3s; }
.delay-1 { --anim-delay: 0.1s; }
.delay-2 { --anim-delay: 0.2s; }
.delay-3 { --anim-delay: 0.3s; }
.delay-5 { --anim-delay: 0.5s; }
.delay-10 { --anim-delay: 1s; }
.delay-20 { --anim-delay: 2s; }
.delay-30 { --anim-delay: 3s; }Base del sistema
Repetición
.infinite hace que la animación se repita sin fin.
Persistencia
El sistema usa animation-fill-mode: both para conservar el estado
inicial y final de la animación.
Duraciones disponibles
0.5s · Movimiento rápido y discreto.
1s · Ritmo base del sistema.
2s · Movimiento más amplio o más perceptible.
3s · Uso reservado para movimientos deliberados o ambientales.
<div class="animate anim-fast fade-in">
...
</div>Delays disponibles
0.1s
0.2s
0.3s
0.5s
1s
2s
3s
<div class="animate fade-up anim-normal delay-3">
...
</div>Animaciones disponibles
Entrada por opacidad
Hace aparecer el elemento desde opacidad cero.
Salida por opacidad
Hace desaparecer el elemento hacia opacidad cero.
Entrada desde abajo
Combina opacidad con desplazamiento vertical ascendente.
Entrada desde arriba
Combina opacidad con desplazamiento vertical descendente.
Entrada desde izquierda
Combina opacidad con desplazamiento horizontal.
Entrada desde derecha
Combina opacidad con desplazamiento horizontal.
Ejemplos de uso
<div class="animate fade-in anim-fast">
...
</div><div class="animate fade-up anim-normal">
...
</div><div class="animate fade-up delay-1">...</div>
<div class="animate fade-up delay-2">...</div>
<div class="animate fade-up delay-3">...</div><div class="animate infinite anim-slow fade-in">
...
</div>Accesibilidad y reduced motion
El sistema respeta prefers-reduced-motion para desactivar animaciones
cuando la persona usuaria así lo ha indicado en su sistema operativo o navegador.
@media (prefers-reduced-motion: reduce) {
.animate {
animation: none !important;
}
}- Reduce estimulación innecesaria.
- Mejora accesibilidad cognitiva y vestibular.
- Hace el sistema más responsable por defecto.
Cuándo usar animaciones
Sí usar
- Entradas suaves de bloques importantes.
- Jerarquía visual en secuencias.
- Pequeñas transiciones que mejoran percepción del sistema.
- Movimientos discretos y consistentes.
No usar
- En todos los elementos al mismo tiempo.
- Para compensar una jerarquía visual débil.
- Con duraciones arbitrarias o muy largas sin intención clara.
- Como sustituto de buen layout o buena tipografía.
Qué sí y qué no va en animations
Qué sí debe contener
- Clase base del sistema de animación.
- Duraciones y delays reutilizables.
- Animaciones genéricas de entrada y salida.
- Reglas de accesibilidad para reduced motion.
Qué no debe contener
- Animaciones específicas de una página del proyecto.
- Efectos visuales decorativos de marca.
- Lógica JS de interacción compleja.
- Estilos que pertenezcan a layout o helpers estructurales.
Siguiente paso
Continúa con guidelines para revisar las reglas generales de uso del framework.