1Ajustez les quatre valeurs des points de contrôle (x1, y1, x2, y2) entre 0 et 1
2Ou cliquez sur un bouton de préréglage (ease, ease-in, ease-out, ease-in-out, linear)
3Réglez la durée de l'animation avec le curseur
4Observez l'aperçu animé pour voir le rendu de l'accélération
5Copiez la fonction de temporisation CSS et utilisez-la dans vos transitions ou animations
Questions fréquentes
cubic-bezier() est une fonction CSS qui définit une courbe d'accélération personnalisée à l'aide de quatre points de contrôle. Elle est utilisée comme valeur pour transition-timing-function et animation-timing-function.
Les quatre valeurs définissent les deux points de contrôle P1(x1,y1) et P2(x2,y2) de la courbe. Les valeurs X doivent être comprises entre 0 et 1 ; les valeurs Y peuvent dépasser cette plage pour créer des effets d'anticipation ou de dépassement.
ease est cubic-bezier(0.25,0.1,0.25,1), ease-in est cubic-bezier(0.42,0,1,1), ease-out est cubic-bezier(0,0,0.58,1), ease-in-out est cubic-bezier(0.42,0,0.58,1) et linear est cubic-bezier(0,0,1,1).
Oui. Utilisez-le comme animation-timing-function dans une animation @keyframes ou comme transition-timing-function dans une transition CSS. Le générateur produit la déclaration transition-timing-function.