---
title: "Movimiento"
description: "Tokens de movimiento basados en muelles, transiciones de estado breves y la obligación estricta de respetar la preferencia de reducir movimiento."
url: "https://tanrei.chnotchy.com/es/foundations/motion/"
last_updated: 2026-10-23T17:33:05.000Z
---

# Movimiento

> Tokens de movimiento basados en muelles, transiciones de estado breves y la obligación estricta de respetar la preferencia de reducir movimiento.

En Tanrei, el movimiento explica un cambio y luego se aparta. La mayor parte es una capa de estado que aparece con un fundido de 200 a 250 milisegundos.

## Dos tipos de movimiento

Los tokens de movimiento se organizan como muelles a lo largo de dos ejes:

- Los muelles **espaciales** mueven o redimensionan cosas. Pueden sobrepasar ligeramente su destino, como un objeto físico al asentarse.
- Los muelles de **efectos** cambian el color y la opacidad. Nunca se sobrepasan, porque un color que rebota parece un fallo.

Cada tipo viene en **rápido**, **predeterminado** y **lento**. Las plataformas con animación de muelles real usan los valores de rigidez y amortiguación; CSS usa la duración y la aproximación con cubic-bezier que se guardan junto a ellos.

Hay dos esquemas. **Estándar** es el predeterminado y tiene una amortiguación casi crítica. **Expresivo** es una capa adicional con más rebote, para los productos que lo quieran.

## Duraciones y curvas de aceleración

Para las transiciones que no son muelles se ofrecen duraciones y curvas de aceleración fijas.

| Tipo de cambio | Pauta |
| --- | --- |
| Cambio de estado (paso del cursor, pulsación, selección) | 200–250ms |
| Un elemento que entra | 300–400ms, más cuanto mayor es la superficie |
| Una revelación grande | hasta 800ms, con los elementos escalonados cada 100ms |
| Todo lo que sale | más rápido de lo que entró |

| Token | Valor | Curva |
| --- | --- | --- |
| `--tanrei-sys-motion-easing-emphasized-accelerate` | cubic-bezier(0.3, 0, 0.8, 0.15) |  |
| `--tanrei-sys-motion-easing-emphasized-decelerate` | cubic-bezier(0.05, 0.7, 0.1, 1) |  |
| `--tanrei-sys-motion-easing-enter` | cubic-bezier(0.2, 0, 0, 1) |  |
| `--tanrei-sys-motion-easing-exit` | cubic-bezier(0.3, 0, 1, 1) |  |
| `--tanrei-sys-motion-easing-linear` | cubic-bezier(0, 0, 1, 1) |  |
| `--tanrei-sys-motion-easing-spatial` | cubic-bezier(0.2, 0, 0, 1) |  |
| `--tanrei-sys-motion-easing-standard` | cubic-bezier(0.2, 0, 0, 1) |  |
| `--tanrei-sys-motion-easing-standard-accelerate` | cubic-bezier(0.3, 0, 1, 1) |  |
| `--tanrei-sys-motion-easing-standard-decelerate` | cubic-bezier(0, 0, 0, 1) |  |
| `--tanrei-sys-motion-easing-state` | cubic-bezier(0.2, 0, 0, 1) |  |

Generado a partir de `design/tokens/tanrei.light.tokens.json`, `tokens/sys/motion.tokens.json`

## Lo que no se mueve

- **El anillo de foco aparece al instante.** Quien usa el teclado necesita ver dónde está sin esperar a una animación.
- **Sin onda de forma predeterminada.** La respuesta a la pulsación es la capa de estado; la onda es una opción del tema, no un punto de partida.

## Movimiento reducido

Toda implementación debe respetar el ajuste de reducir movimiento de la plataforma. Con él activo, el movimiento espacial se elimina o se sustituye por un fundido cruzado breve, y nada se repite en bucle. Esto forma parte de la definición de terminado de cada componente, no es una mejora.

Todos los valores figuran en la [referencia de tokens de movimiento](https://tanrei.chnotchy.com/es/tokens/motion/).