cubic-bezier(0.25, 0.10, 0.25, 1.00)
●
Generated CSS
Cada transición y animación CSS tiene una curva de aceleración — una función matemática que controla cómo cambia el valor animado con el tiempo. El eje horizontal representa el tiempo (0 = inicio, 1 = fin de la duración) y el eje vertical representa el progreso del valor animado (0 = valor inicial, 1 = valor final). Una línea diagonal recta significa movimiento lineal — velocidad constante en todo momento. Cualquier curva que se aleje de esa diagonal introduce aceleración y desaceleración.
La función cubic-bezier() es el mecanismo CSS para definir cualquier curva de aceleración personalizada. Describe una curva de Bezier cúbica usando dos puntos de control — P1 y P2 — que atraen la curva hacia ellos como imanes sin que la curva pase nunca por ellos. P0 siempre está fijo en (0,0) y P3 siempre está fijo en (1,1).
Los valores X de P1 y P2 deben permanecer entre 0 y 1 — representan puntos en el tiempo. Los valores Y, sin embargo, pueden ir a cualquier parte. Un valor Y por encima de 1 significa que la propiedad animada temporalmente excede su valor final antes de asentarse — esto es el sobreimpulso que produce efectos de resorte y rebote. Un valor Y por debajo de 0 significa que la propiedad desciende por debajo de su valor inicial — esto es el efecto de anticipación.
Una pendiente pronunciada al inicio significa movimiento inicial rápido; una pendiente suave significa inicio lento. Una curva que sube por encima de la línea Y=1 significa que la animación tiene sobreimpulso. Una curva en S — suave en ambos extremos con un medio pronunciado — es la familia ease-in-out.
CSS proporciona cinco alias de palabras clave. ease es el valor predeterminado del navegador — tiene un inicio rápido y una desaceleración muy gradual. ease-out tiene el inicio más rápido y el final más lento, siendo la mejor opción para elementos que llegan desde fuera de la pantalla. ease-in es lo opuesto — inicio lento, final rápido — que es correcto para las cosas que salen. ease-in-out es simétrico y funciona bien para transiciones entre dos estados iguales. linear no tiene ninguna aceleración.
La comunidad de diseño ha convergido en varias curvas nombradas personalizadas que aparecen en todas partes en la UI moderna. Material Design usa cubic-bezier(0.4, 0, 0.2, 1) para transiciones entre estados, cubic-bezier(0, 0, 0.2, 1) para entradas y cubic-bezier(0.4, 0, 1, 1) para salidas. La curva "expo out" cubic-bezier(0.16, 1, 0.3, 1) es muy popular para animaciones de cajón lateral.
La función steps() no es una curva en absoluto — produce saltos discretos en lugar de interpolación continua. Es esencial para animaciones de hojas de sprites (donde necesitas saltar entre fotogramas, no interpolar entre ellos), efectos de máquina de escribir y efectos de parpadeo de cursor.
CSS recientemente obtuvo una función de temporización linear() que te permite definir una curva de aceleración lineal por tramos especificando una serie de valores de progreso en porcentajes de tiempo específicos. Esto desbloquea curvas de aceleración que cambian de dirección más de una vez, como un resorte de múltiples rebotes.
La regla de mayor impacto es hacer coincidir el carácter de la curva con la física de lo que el elemento representa. Las cosas que entran a la pantalla deben usar variantes ease-out. Las cosas que salen deben usar variantes ease-in. Las cosas que se transforman entre dos estados de igual peso funcionan mejor con ease-in-out. Las cosas que necesitan sentirse divertidas se benefician de una curva de resorte con ligero sobreimpulso.
La función cubic-bezier() funciona de manera idéntica en transition-timing-function y animation-timing-function. En animaciones de fotogramas clave, incluso puedes especificar una función de temporización diferente por fotograma clave.
Chrome y Edge DevTools incluyen un editor de cubic-bezier integrado. Cuando inspeccionas cualquier elemento que tiene una propiedad transition o animation-timing-function, verás un pequeño ícono de curva junto al valor de la función de temporización. Hacer clic en él abre un editor interactivo de curvas.
Sí — solo los valores Y pueden exceder el rango 0 a 1. Los valores X deben permanecer entre 0 y 1 porque representan tiempo. Y por encima de 1 = sobreimpulso (resorte); Y por debajo de 0 = subimpulso (anticipación).
ease tiene un inicio rápido y desaceleración gradual — se siente vivo y natural para la mayoría de las interacciones de UI. ease-in-out es perfectamente simétrico (igualmente lento en ambos extremos), mejor para transiciones de panel deliberadas.
Las curvas cubic-bezier CSS son curvas matemáticas fijas — no pueden responder a la velocidad actual del elemento cuando se interrumpen a mitad de animación. Las bibliotecas de física de resorte de JavaScript como Framer Motion o GSAP pueden responder a las interrupciones llevando la velocidad actual.
Usa steps() cuando necesites saltos discretos en lugar de movimiento continuo — avance de fotogramas de hoja de sprites, revelaciones de carácter de máquina de escribir, parpadeos de cursor. Usa cubic-bezier() para cualquier animación donde quieras interpolación continua suave.
Sí — el generador en esta página muestra una vista previa de lienzo en vivo que se actualiza mientras arrastras los puntos de control. También puedes abrir Chrome DevTools, inspeccionar cualquier elemento con una transición, y hacer clic en el ícono de curva junto al valor de la función de temporización para abrir el editor de curvas integrado del navegador.