Saltar al contenido
Sistema

Movimiento

Una curva, tres duraciones y las recetas de hover, foco y aparición que salen de ellas.

La duración se elige por lo que está haciendo el usuario, no por gusto. Si está pulsando, 120 ms. Si tiene el puntero o el foco encima, 200 ms. Si algo aparece, 480 ms. Si lo que aparece es una superficie grande, 720 ms. Las cuatro bandas usan la misma curva, nada rebota y todo se detiene con prefers-reduced-motion. Debajo tienes las recetas de hover, pressed, foco, aparición y countup.

Una sola curva

cubic-bezier(0.19, 1, 0.22, 1): con los puntos de control en (0.19, 1) y (0.22, 1), el arranque es rápido y casi todo el tiempo se va en frenar. Botones, paneles, apariciones y el re-tintado por prop usan esta curva. No hay una segunda.

cubic-bezier(0.19, 1, 0.22, 1)
0.19, 1 0.22, 1 tiempo → progreso

Demos en vivo

La entrada arc-enter: un fundido con 4 px de recorrido y 40 ms de retardo entre elementos. Es la misma que usa todo este manual.
En vivo
200
ms · transición estándar
Acción primaria

Recetas de interacción

Pasa el cursor o enfoca para reproducir la entrada.
1240
Asistentes
87
NPS
 Las métricas cuentan de cero al valor en 600 ms; con reduced-motion aparece ya el número final.

Tokens de movimiento

TokenValorUso
--arc-duration-press120msAcuse de pulsación (:active)
--arc-duration-fast200msHover, foco, cambio de estado, salidas
--arc-duration480msAparición de un elemento: dialog, callout, popover
--arc-duration-slow720msSuperficie grande y entrada al hacer scroll
--arc-easecubic-bezier(0.19, 1, 0.22, 1)Curva única de la marca

Ejemplos CSS

motion-tokens.css
/* Transición estándar de la marca */
.button {
  transition:
    background var(--arc-duration, 480ms) var(--arc-ease, cubic-bezier(0.19, 1, 0.22, 1)),
    color var(--arc-duration, 480ms) var(--arc-ease, cubic-bezier(0.19, 1, 0.22, 1)),
    transform var(--arc-duration, 480ms) var(--arc-ease, cubic-bezier(0.19, 1, 0.22, 1));
}

/* Aparición al montar */
@keyframes fade-in {
  from { opacity: 0; }
  to { opacity: 1; }
}

.panel {
  animation: fade-in var(--arc-duration, 480ms) var(--arc-ease, cubic-bezier(0.19, 1, 0.22, 1));
}

/* Respeta reduced-motion */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    transition-duration: 0.01ms !important;
    animation-duration: 0.01ms !important;
  }
}

Prohibido

  • Nada de bounce ni de elastic. Si un gesto necesita énfasis, dale más duración.
  • Lo que se ve cien veces al día no se anima: una acción de teclado abre de golpe. Lo que se ve decenas de veces —hover, recorrer una lista— va en la banda más corta que sirva.
  • El texto corrido no se mueve con parallax. Para dar profundidad a un bloque, mueve la imagen de fondo y deja el texto quieto.
  • Ni vídeo ni audio arrancan solos sin un control a la vista: el play lo pulsa quien lee.
  • Nada de transformaciones que muevan el layout. Anima transform y opacity, que no reflujan la página.