Cómo se usa
- Arrastre un Punto de control 1 o un Punto de control 2 en la gráfica. Haga clic en un punto y use las flechas del teclado para pasos pequeños; mantenga pulsada la tecla Mayús para pasos mayores.
- Escriba valores exactos en x1 (de 0 a 1), y1, x2 (de 0 a 1) e y2 cuando necesite una curva precisa. Los valores de x deben quedarse entre 0 y 1.
- Pulse un ajuste como ease-in-out, o pulse Reproducir en Vista previa de la animación para ver la bola seguir la curva.
- Copie la declaración CSS y úsela en una transición o en una animación.
Qué significan los cuatro números
Una curva de temporización cubic Bézier empieza en (0, 0) y termina en (1, 1). Sus dos puntos de control, (x1, y1) y (x2, y2), fijan su forma. En el eje horizontal está la parte del tiempo que ha pasado, y en el vertical, la parte del cambio que se ha hecho. La especificación CSS Easing Functions (en inglés) limita los valores x de los puntos de control al intervalo de 0 a 1, porque el tiempo no puede ir hacia atrás ni pasar del final.
Los valores y no tienen ese límite. Un valor de y mayor que 1 o menor que 0 hace que la curva sobrepase, de modo que el cambio pasa de su final y vuelve, o empieza yendo en sentido contrario.
cubic-bezier(x1, y1, x2, y2), donde x1 y x2 están entre 0 y 1Los ajustes predefinidos y la animación
La palabra clave ease es cubic-bezier(0.25, 0.1, 0.25, 1), ease-in es cubic-bezier(0.42, 0, 1, 1), ease-out es cubic-bezier(0, 0, 0.58, 1) y ease-in-out es cubic-bezier(0.42, 0, 0.58, 1), tal como las da la especificación. La temporización linear es una recta, que también dibuja la curva cubic-bezier(0, 0, 1, 1).
La bola recorre la curva como temporización de una animación, así que la aceleración se ve como movimiento. Si su dispositivo pide movimiento reducido, la animación empieza en pausa, y Reproducir la pone en marcha.
- Use una curva suave como ease-out para un elemento que entra en la página, y ease-in para uno que sale.
- Mantenga una transición corta, para que se note la aceleración y no haya que esperarla.
Ejemplo resuelto: el progreso a mitad de tiempo
La curva ease-in-out, cubic-bezier(0.42, 0, 0.58, 1), es simétrica respecto a su centro, así que a mitad de tiempo ha hecho exactamente la mitad del cambio: la lectura muestra 0,5000.
La curva ease, cubic-bezier(0.25, 0.1, 0.25, 1), va más adelante en el mismo punto. A mitad de tiempo ha hecho 0,8024 del cambio, así que avanza rápido al principio y se frena al final.
Preguntas frecuentes
¿Qué muestra la bola?
La bola recorre la pista de izquierda a derecha, y su posición sigue la curva: la posición horizontal es la parte del cambio hecha hasta ese momento. Cuando la curva sube por encima de 1, la bola pasa del final de la pista y se recorta allí.
¿Por qué los valores de x no pueden pasar de 0 y 1?
El eje horizontal es el tiempo, y la curva cubre el tiempo desde el inicio hasta el final. Un tiempo anterior al inicio o posterior al final no tiene sitio en la curva, así que la especificación mantiene los valores x de los puntos de control entre 0 y 1. Los valores y no tienen ese límite.
¿Cuál es la diferencia entre ease-in y ease-out?
ease-in empieza despacio y se acelera hacia el final, mientras que ease-out empieza rápido y se frena al final. Las dos curvas son imágenes especulares una de otra, así que el mismo cambio se lee al revés.
¿Puedo usar el valor en una animación además de en una transición?
Sí. El mismo valor cubic-bezier() sirve para animation-timing-function y para transition-timing-function, así que la declaración se puede usar en cualquiera de los dos lugares.
¿Se guarda o se envía a algún servidor lo que arrastro o escribo?
No. La curva y la animación se generan en su navegador. No se guarda nada ni se envía a nuestro servidor, así que copie la declaración antes de salir de la página.
Fuentes
- W3C (en inglés): CSS Easing Functions Level 1, cubic Bézier easing functions
- MDN (en inglés): transition-timing-function
Cifras y texto revisados por última vez el martes, 10 de noviembre de 2026.