Español
Dibuja curvas de easing CSS con una vista previa animada en vivo.
Última actualización
.element {
transition: transform 1.2s cubic-bezier(0.25, 0.1, 0.25, 1);
}Una *función de easing* en CSS controla cómo una animación acelera y desacelera durante su duración. Las palabras clave ease, ease-in, ease-out e ease-in-out son atajos para cuatro curvas concretas. Para cualquier cosa más allá de esas cuatro, CSS te da cubic-bezier() - una función que recibe cuatro números y dibuja una curva personalizada.
Esos cuatro números son las coordenadas de dos puntos de control (x1, y1, x2, y2). Escribirlos a mano es incómodo porque pequeños cambios producen efectos visuales grandes, y los pequeños sobrepasos generan movimiento *con rebote* que no se ve en los números. Un editor visual te deja arrastrar los manejadores y ver la curva responder - mucho más rápido que retocar decimales.
El editor de Coddy dibuja la curva en tiempo real, anima una bola de prueba con tu easing y trae presets para los patrones más comunes: las palabras clave de CSS, la curva *standard* de Material Design, una salida con rebote y un *anticipate* con sobreimpulso. Copia la cadena cubic-bezier() resultante y pégala en tu CSS - todo se ejecuta en el navegador.
linear - progreso constante por unidad de tiempo.Pulsa un preset cercano al sentir que buscas. *Material standard* y *Bouncy out* son buenos puntos de partida para UI; *ease-out* es la opción segura para entradas.
Los círculos en color son los puntos de control. Arrastra el primero para afinar cómo *empieza* la animación; el segundo para afinar cómo *termina*. Tirar de un manejador por encima del borde superior produce sobreimpulso.
Elige una duración realista para tu animación real. Las transiciones de UI suelen ir entre 150 y 300ms; las animaciones de énfasis 400–600ms. Pulsa *Repetir* para volver a lanzar la vista previa con la nueva duración.
Para valores precisos, escribe en los inputs X1/Y1/X2/Y2. Y puede caer por debajo de 0 o pasar de 1 - X siempre está en 0..1.
Pulsa *Copiar* para llevarte la regla transition completa. Llévala a tu hoja de estilos y sustituye transform por la propiedad que estés animando.
Easings comunes y los cubic-bezier que hay detrás. Las cuatro palabras clave son alias de curvas cubic-bezier concretas.
| Easing | Valores cubic-bezier | Cuándo usarlo |
|---|---|---|
ease | (0.25, 0.1, 0.25, 1) | Por defecto en transition - suave pero genérico |
linear | (0, 0, 1, 1) | Velocidad constante - normalmente mal para UI, bien para spinners |
ease-in | (0.42, 0, 1, 1) | Inicio lento, final rápido - mejor para salidas |
ease-out | (0, 0, 0.58, 1) | Inicio rápido, final lento - mejor para entradas y reacciones |
ease-in-out | (0.42, 0, 0.58, 1) | Simétrico - mejor para toggles ida y vuelta |
| Material standard | (0.4, 0, 0.2, 1) | Movimiento moderno y ágil de UI |
| Bouncy out | (0.18, 0.89, 0.32, 1.28) | Se pasa y se asienta - entradas divertidas |
.btn { transition: transform 180ms cubic-bezier(0.4, 0, 0.2, 1);}.btn:hover { transform: translateY(-2px);}La mayor parte del levantamiento ocurre rápido al inicio y luego se asienta - se siente responsivo al cursor en lugar de pesado.
.card { transition: transform 350ms cubic-bezier(0.18, 0.89, 0.32, 1.28);}Y2 a 1.28 hace que la curva pase del destino y se asiente. Úsalo con cuentagotas - el movimiento con rebote cansa si todo se mueve así.
.hero { transition: transform 500ms cubic-bezier(0.68, -0.55, 0.27, 1.55);}Y1 negativo hace que la animación se mueva un instante en sentido *contrario* antes de ir al destino. Truco prestado de la animación clásica - un toque de anticipación hace que el movimiento principal parezca intencional.
ease-in para entradas. Empieza lento y termina rápido - justo lo contrario de lo que se siente responsivo. Usa ease-out.linear para movimiento de UI porque parece neutro. La velocidad constante parece mecánica; está bien para barras de progreso y spinners, no para casi nada más.cubic-bezier()?cubic-bezier(x1, y1, x2, y2). El primer punto modela cómo *empieza* la animación, el segundo cómo *termina*. X siempre va entre 0 y 1 (tiempo); Y puede salirse de 0..1 para sobreimpulso y anticipación (progreso).cubic-bezier(0.4, 0, 0.2, 1). Para salidas, *ease-in* va bien. Evita *linear* salvo cuando animes progreso.ease y ease-out?ease también arranca suave. ease-out arranca a tope y desacelera - ese movimiento *inmediato* es lo que se siente más responsivo que ease.cubic-bezier(0.18, 0.89, 0.32, 1.28) se pasa ~28 % antes de asentarse. Para varios rebotes necesitas @keyframes o una librería de física de muelles - cubic-bezier solo permite un sobreimpulso.@keyframes?animation-timing-function, en el shorthand animation o por keyframe. Para movimientos complejos en varios pasos puedes aplicar un easing distinto entre cada par de keyframes.