1Ajuste los cuatro valores de los puntos de control (x1, y1, x2, y2) entre 0 y 1
2O haga clic en un botón de preajuste (ease, ease-in, ease-out, ease-in-out, linear)
3Establezca la duración de la animación con el control deslizante
4Observe la vista previa animada para ver cómo se siente la aceleración
5Copie la función de temporización CSS y úsela en transiciones o animaciones
Preguntas frecuentes
cubic-bezier() es una función CSS que define una curva de aceleración personalizada utilizando cuatro puntos de control. Se utiliza como valor para transition-timing-function y animation-timing-function.
Los cuatro valores definen los dos puntos de control P1(x1,y1) y P2(x2,y2) de la curva. Los valores X deben estar entre 0 y 1; los valores Y pueden exceder ese rango para crear efectos de anticipación o sobreimpulso.
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), ease-in-out es cubic-bezier(0.42,0,0.58,1) y linear es cubic-bezier(0,0,1,1).
Sí. Úselo como animation-timing-function en una animación @keyframes o como transition-timing-function en una transición CSS. El generador produce la declaración transition-timing-function.