# Transition (cambios suaves)

> Documentación de QuicklyCSS V2 2.0.0-alpha.2. Versión preliminar.

- Página canónica: https://quicklycss.cl/docs/transition.php
- Catálogo de API: https://quicklycss.cl/quicklycss-api.json
- Índice para IA: https://quicklycss.cl/llms.txt

Utilidades · Movimiento

Combina propiedad, duración, curva y retraso para controlar cómo responde un elemento cuando cambia de estado.

v2.0

4
## Cuatro piezas
Propiedad, duración, curva y delay se combinan sin repetir una declaración completa.

13
## 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.

i
## Una transición necesita un cambio
Estas clases definen cómo se interpola un estado, pero el cambio debe provenir de `:hover`, `:focus`, una clase de estado o JavaScript.

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.

HTML

Resultado aplicado  Transform · 500ms

Pasa el cursor por el panel

Transition  Hover

.trans-transform limita la interpolación a transform; .duration-500 y .ease-out controlan su ritmo.

```html
<button class="trans-transform duration-500 ease-out">Acción</button>
```

.trans-opacity evita que otros cambios visuales adopten la transición.

```html
<button class="trans-opacity duration-700 ease-in-out">Acción</button>
```

.trans-colors interpola texto, fondo, borde, fill y stroke.

```html
<button class="trans-colors duration-300 ease-in-out">Acción</button>
```

.duration-1500 permite observar una transición prolongada sin modificar la propiedad ni la curva.

```html
<button class="trans-transform duration-1500 ease-smooth">Acción</button>
```

.delay-700 espera 700ms antes de comenzar; la duración sigue siendo 500ms.

```html
<button class="trans-transform duration-500 delay-700 ease-out">Acción</button>
```

.ease-bounce sobrepasa ligeramente el destino antes de estabilizarse.

```html
<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.

1. ¿Qué cambia?  Usa `.trans-*`

2. ¿Cuánto dura?  Usa `.duration-*`

3. ¿Cómo avanza?  Usa `.ease-*`

4. ¿Cuándo comienza?  Usa `.delay-*`

### Propiedades

`.trans` Uso rápido

#### all
Atajo general para cualquier propiedad animable.

`.trans-all` Composición

#### all
Declara de forma explícita una transición general.

`.trans-colors` Estados visuales

#### color + fondos + bordes
Limita el cambio a propiedades de color.

`.trans-opacity` Visibilidad

#### opacity
Controla apariciones y cambios de transparencia.

`.trans-transform` Movimiento

#### transform
Optimiza desplazamientos, escalas y rotaciones.

`.trans-shadow` Profundidad

#### box-shadow + filter + text-shadow
Suaviza elevación, filtros y sombras de texto.

`.trans-filter` Filtros

#### filter + backdrop-filter
Aísla desenfoque, contraste y filtros visuales.

`.trans-size` Tamaño

#### width + height + límites
Anima dimensiones y sus valores mínimos o máximos.

`.trans-spacing` Espaciado

#### margin + padding + gap
Anima separación interior, exterior y entre elementos.

`.trans-position` Posición

#### top + right + bottom + left + inset
Controla cambios de posición en elementos posicionados.

`.trans-none` Reset

#### none
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

`50` ms  .duration-50

`75` ms  .duration-75

`100` ms  .duration-100

`150` ms  .duration-150

`200` ms  .duration-200

`250` ms  .duration-250

`300` ms  .duration-300

`400` ms  .duration-400

`500` ms  .duration-500

`700` ms  .duration-700

`1000` ms  .duration-1000

`1500` ms  .duration-1500

`2000` ms  .duration-2000

### Delay

`0` ms  .delay-0

`50` ms  .delay-50

`75` ms  .delay-75

`100` ms  .delay-100

`150` ms  .delay-150

`200` ms  .delay-200

`300` ms  .delay-300

`500` ms  .delay-500

`700` ms  .delay-700

`1000` ms  .delay-1000

Composición  `.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-default` CURVA

#### ease

Equilibrada para cambios generales.

`.ease-linear` CURVA

#### linear

Mantiene velocidad constante.

`.ease-in` CURVA

#### cubic-bezier(.4, 0, 1, 1)

Comienza lentamente y acelera.

`.ease-out` CURVA

#### cubic-bezier(0, 0, .2, 1)

Comienza rápido y desacelera.

`.ease-in-out` CURVA

#### cubic-bezier(.4, 0, .2, 1)

Suaviza tanto la entrada como la salida.

`.ease-smooth` CURVA

#### cubic-bezier(.22, 1, .36, 1)

Produce una llegada larga y fluida.

`.ease-snappy` CURVA

#### cubic-bezier(.2, .8, .2, 1)

Responde rápido sin perder suavidad.

`.ease-bounce` CURVA

#### cubic-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

01
### Limita la propiedad
Prefiere `.trans-transform` o `.trans-opacity` frente a `.trans-all`.

02
### Usa tiempos breves
Entre 150ms y 300ms suele funcionar bien para controles y respuestas directas.

03
### Reserva el delay
Utilízalo para secuencias intencionales; evita retrasar acciones que esperan respuesta inmediata.

04
### Respeta al usuario
El módulo reduce automáticamente movimiento y retrasos cuando el sistema lo solicita.