Utilidades · Movimiento
Transition (cambios suaves)
Combina propiedad, duración, curva y retraso para controlar cómo responde un elemento cuando cambia de estado.
Cuatro piezas
Propiedad, duración, curva y delay se combinan sin repetir una declaración completa.
Escala ampliada
Duraciones desde 50ms hasta 2000ms para microinteracciones y movimientos largos.
Movimiento reducido
La hoja respeta prefers-reduced-motion y elimina duración y delay.
Código + resultado
Compara propiedades, tiempos y curvas
Cambia de pestaña y pasa el cursor sobre el resultado para ejecutar la transición seleccionada.
<button class="trans-transform duration-500 ease-out">Acción</button>
<button class="trans-opacity duration-700 ease-in-out">Acción</button>
<button class="trans-colors duration-300 ease-in-out">Acción</button>
<button class="trans-transform duration-1500 ease-smooth">Acción</button>
<button class="trans-transform duration-500 delay-700 ease-out">Acción</button>
<button class="trans-transform duration-700 ease-bounce">Acción</button>
Mapa del sistema
Construye la transición con cuatro decisiones
Cada grupo modifica una parte independiente de la declaración final.
.trans-*.duration-*.ease-*.delay-*Propiedades
.transUso rápidoall
Atajo general para cualquier propiedad animable.
.trans-allComposiciónall
Declara de forma explícita una transición general.
.trans-colorsEstados visualescolor + fondos + bordes
Limita el cambio a propiedades de color.
.trans-opacityVisibilidadopacity
Controla apariciones y cambios de transparencia.
.trans-transformMovimientotransform
Optimiza desplazamientos, escalas y rotaciones.
.trans-shadowProfundidadbox-shadow + filter + text-shadow
Suaviza elevación, filtros y sombras de texto.
.trans-filterFiltrosfilter + backdrop-filter
Aísla desenfoque, contraste y filtros visuales.
.trans-sizeTamañowidth + height + límites
Anima dimensiones y sus valores mínimos o máximos.
.trans-spacingEspaciadomargin + padding + gap
Anima separación interior, exterior y entre elementos.
.trans-positionPosicióntop + right + bottom + left + inset
Controla cambios de posición en elementos posicionados.
.trans-noneResetnone
Desactiva cualquier transición aplicada previamente.
Escala temporal
Duraciones y delays combinables
La duración controla el recorrido; el delay añade una espera antes de iniciarlo.
Duración
50ms.duration-5075ms.duration-75100ms.duration-100150ms.duration-150200ms.duration-200250ms.duration-250300ms.duration-300400ms.duration-400500ms.duration-500700ms.duration-7001000ms.duration-10001500ms.duration-15002000ms.duration-2000Delay
0ms.delay-050ms.delay-5075ms.delay-75100ms.delay-100150ms.delay-150200ms.delay-200300ms.delay-300500ms.delay-500700ms.delay-7001000ms.delay-1000.trans-transform.duration-500.delay-150.ease-out aplica las cuatro decisiones sin crear una clase nueva.Ritmo
Ocho curvas de aceleración
La curva cambia la percepción del movimiento sin modificar su duración total.
.ease-defaultCURVAease
Equilibrada para cambios generales.
.ease-linearCURVAlinear
Mantiene velocidad constante.
.ease-inCURVAcubic-bezier(.4, 0, 1, 1)
Comienza lentamente y acelera.
.ease-outCURVAcubic-bezier(0, 0, .2, 1)
Comienza rápido y desacelera.
.ease-in-outCURVAcubic-bezier(.4, 0, .2, 1)
Suaviza tanto la entrada como la salida.
.ease-smoothCURVAcubic-bezier(.22, 1, .36, 1)
Produce una llegada larga y fluida.
.ease-snappyCURVAcubic-bezier(.2, .8, .2, 1)
Responde rápido sin perder suavidad.
.ease-bounceCURVAcubic-bezier(.34, 1.56, .64, 1)
Sobrepasa ligeramente el destino y regresa.
Referencia
Clases disponibles
Combina una clase de cada grupo; si omites un grupo se utiliza su valor predeterminado.
| Grupo | Patrón | Opciones | Valor predeterminado |
|---|---|---|---|
| Propiedad | .trans-* | all, colors, opacity, transform, shadow, filter, size, spacing, position, none | all |
| Duración | .duration-{ms} | 50, 75, 100, 150, 200, 250, 300, 400, 500, 700, 1000, 1500, 2000 | 200ms |
| Curva | .ease-* | default, linear, in, out, in-out, smooth, snappy, bounce | ease |
| Delay | .delay-{ms} | 0, 50, 75, 100, 150, 200, 300, 500, 700, 1000 | 0ms |
Recomendaciones
Buenas prácticas de transición
Limita la propiedad
Prefiere .trans-transform o .trans-opacity frente a .trans-all.
Usa tiempos breves
Entre 150ms y 300ms suele funcionar bien para controles y respuestas directas.
Reserva el delay
Utilízalo para secuencias intencionales; evita retrasar acciones que esperan respuesta inmediata.
Respeta al usuario
El módulo reduce automáticamente movimiento y retrasos cuando el sistema lo solicita.