Utilidades · Movimiento
Animation (secuencias reutilizables)
Aplica entradas in, salidas out, indicadores de estado y movimientos continuos con controles independientes para duración, retraso, repetición y ejecución.
Once secuencias
Cuatro entradas, cuatro salidas y tres estados continuos cubren los patrones de interfaz más frecuentes.
Control por capas
Duración, retraso, iteración, relleno y estado se combinan sin duplicar keyframes.
Movimiento accesible
Detecta la opción “Reducir movimiento” del dispositivo y minimiza automáticamente las animaciones.
Nomenclatura
In muestra; Out retira
Cada familia tiene una entrada y una salida predecibles. in termina con el elemento visible en su posición natural; out comienza allí y termina ocultándolo.
El elemento aparece y termina listo para participar visualmente en la interfaz.
El elemento desaparece y conserva el último fotograma mediante fill-mode: both.
Fade
.animate-fade-in.animate-fade-outAparece o desaparece sin modificar la posición.
Slide up
.animate-slide-in-up.animate-slide-out-upUp indica el movimiento: entra desde abajo o sale hacia arriba.
Slide down
.animate-slide-in-down.animate-slide-out-downDown indica el movimiento: entra desde arriba o sale hacia abajo.
Scale
.animate-scale-in.animate-scale-outAparece creciendo o desaparece reduciendo su tamaño.
Código + resultado
Compara entradas, salidas y estados
Cambia de pestaña para ejecutar otra secuencia. El HTML mostrado es exactamente el que produce el resultado aplicado.
<article class="animate-fade-in">
<span>Q</span>
<strong>Animation</strong>
<small>Resultado aplicado</small>
</article>
<article class="animate-slide-in-up">
<span>Q</span>
<strong>Animation</strong>
<small>Resultado aplicado</small>
</article>
<article class="animate-slide-in-down">
<span>Q</span>
<strong>Animation</strong>
<small>Resultado aplicado</small>
</article>
<article class="animate-scale-in">
<span>Q</span>
<strong>Animation</strong>
<small>Resultado aplicado</small>
</article>
<article class="animate-fade-out">
<span>Q</span>
<strong>Animation</strong>
<small>Resultado aplicado</small>
</article>
<article class="animate-slide-out-up">
<span>Q</span>
<strong>Animation</strong>
<small>Resultado aplicado</small>
</article>
<article class="animate-slide-out-down">
<span>Q</span>
<strong>Animation</strong>
<small>Resultado aplicado</small>
</article>
<article class="animate-scale-out">
<span>Q</span>
<strong>Animation</strong>
<small>Resultado aplicado</small>
</article>
<article class="animate-pulse">
<span>Q</span>
<strong>Animation</strong>
<small>Resultado aplicado</small>
</article>
<article class="animate-spin">
<span>Q</span>
<strong>Animation</strong>
<small>Resultado aplicado</small>
</article>
<article class="animate-bounce">
<span>Q</span>
<strong>Animation</strong>
<small>Resultado aplicado</small>
</article>
Ajustes
Controla la ejecución sin crear otra animación
Los modificadores actualizan variables --qy-animation-* que consume la clase principal. Pasa el mouse sobre las tarjetas inferiores para comparar los estados.
Duración
.anim-duration-200200ms.anim-duration-500500ms.anim-duration-10001000ms.anim-duration-20002000msRetraso
.anim-delay-0.anim-delay-150.anim-delay-300.anim-delay-500Una vez o continua
.anim-once.anim-infiniteLa primera termina una vez; la segunda continúa mientras mantienes el mouse sobre la tarjeta.
Estado final
.anim-fill-none.anim-fill-forwardsnone recupera el estado inicial; forwards conserva el último fotograma.
Pausa y reanuda
.anim-paused.anim-runningUna muestra queda detenida y la otra se ejecuta al pasar el mouse.
Sin animación
.animate-noneLa segunda muestra permanece inmóvil porque elimina completamente la animación.
Composición
Una clase principal y los controles necesarios
No necesitas repetir propiedades ni crear un keyframe nuevo para cambiar tiempo o repetición.
.animate-slide-in-up.anim-duration-1000.anim-delay-150<article class="animate-slide-in-up anim-duration-1000 anim-delay-150">
Contenido que entra desde abajo
</article>La clase principal define los keyframes; los modificadores cambian únicamente las variables de ejecución.
Referencia
Clases disponibles
La tabla coincide con las utilidades reales incluidas en animation.css.
| Familia | Clases | Responsabilidad | Valor inicial |
|---|---|---|---|
| Entradas | .animate-fade-in, .animate-slide-in-up, .animate-slide-in-down, .animate-scale-in | Muestra el elemento mediante opacidad, desplazamiento o escala. | Una ejecución. |
| Salidas | .animate-fade-out, .animate-slide-out-up, .animate-slide-out-down, .animate-scale-out | Retira el elemento y conserva el estado final. | Una ejecución. |
| Estado continuo | .animate-pulse, .animate-spin, .animate-bounce | Comunica espera, proceso o actividad. | Infinita. |
| Alias compatibles | .animate-slide-up, .animate-slide-down | Mantiene código anterior; para código nuevo utiliza las clases explícitas slide-in. | 500ms. |
| Duración | .anim-duration-{200|500|1000|2000} | Cambia --qy-animation-duration. | Definida por la animación. |
| Retraso | .anim-delay-{0|150|300|500} | Cambia --qy-animation-delay. | 0ms |
| Iteraciones | .anim-once, .anim-infinite | Una ejecución o repetición continua. | Según la animación. |
| Relleno | .anim-fill-none, .anim-fill-forwards | Conserva o descarta el último fotograma. | both o none. |
| Estado | .anim-paused, .anim-running | Pausa o reanuda. | running |
| Reset | .animate-none | Elimina la animación completa. | none |
Recomendaciones
Buenas prácticas de movimiento
Comunica una causa
Anima para explicar entrada, espera o continuidad; evita movimiento puramente decorativo.
Una animación principal
No combines dos clases .animate-*: ambas escribirían la propiedad animation.
Limita los infinitos
Reserva pulse, spin y bounce para indicadores que realmente continúan activos.
Respeta la preferencia del sistema
Si el usuario activa “Reducir movimiento” en su dispositivo, QuicklyCSS minimiza automáticamente las animaciones.