¿Cuál es la aceleración CSS por defecto?

Las transiciones y animaciones usan ease por defecto, que equivale a cubic-bezier(0.25, 0.1, 0.25, 1): un inicio rápido y un final suave.

¿Cómo creo un rebote o un efecto que se pasa del final?

Arrastra un control por encima de 1 o por debajo de 0. easeOutBack, cubic-bezier(0.34, 1.56, 0.64, 1), sobrepasa el final y luego vuelve a su sitio. Una sola curva Bézier cúbica no puede rebotar varias veces; para eso usa keyframes o la función linear().

¿Puedo usar el mismo valor en animaciones?

Sí. El valor funciona en transition-timing-function, animation-timing-function y la opción easing de la Web Animations API.

Generador de curvas Bézier

Da forma a curvas de aceleración CSS arrastrando dos controles. Compara el movimiento con una temporización lineal y copia cubic-bezier() para transiciones o Tailwind.

Editor de curva

Arrastra cualquiera de los controles. La línea discontinua es la temporización lineal.

Vista previa del movimiento

Tu curva

Lineal

Posición en cada décima parte de la duración

transition: transform 1000ms ease;
/* or */
animation-timing-function: ease;

Todo permanece en tu navegador.

Referencias de formatos

MDN — cubic-bezier()
W3C — CSS Easing Functions Level 1

Página de la herramienta actualizada: 2026-10-25

Editor de curva

Vista previa del movimiento

Guía y ejemplo

Herramientas relacionadas

Referencias de formatos