Question 1

Qu'est-ce qu'une fonction cubic-bezier ?

Accepted Answer

Une fonction cubic-bezier définit une courbe lisse utilisée comme fonction de temporisation dans les animations et transitions CSS. Elle prend quatre paramètres (x1, y1, x2, y2) qui contrôlent la forme de la courbe.

Question 2

Que fait la propriété animation-timing-function ?

Accepted Answer

La propriété CSS animation-timing-function spécifie comment une animation progresse à travers chaque cycle. Elle contrôle si l'animation accélère, décélère ou se déplace à vitesse constante.

Question 3

Quelle est la différence entre ease et ease-in-out ?

Accepted Answer

ease démarre rapidement et ralentit vers la fin. ease-in-out démarre lentement, accélère au milieu puis ralentit à nouveau à la fin, créant une sensation plus naturelle.

Question 4

Les valeurs y peuvent-elles dépasser l'intervalle 0 à 1 ?

Accepted Answer

Oui. Contrairement aux valeurs x qui doivent rester entre 0 et 1, les valeurs y peuvent dépasser cet intervalle pour créer des effets de dépassement ou de rebond.

Question 5

Comment appliquer la fonction de temporisation générée à une animation ?

Accepted Answer

Copiez le CSS généré et appliquez-le avec animation-timing-function: cubic-bezier(x1, y1, x2, y2) ou transition-timing-function: cubic-bezier(x1, y1, x2, y2) dans votre feuille de style.

Générateur de temporisation d'animation

Préréglages

Personnalisé

Aperçu

Questions Fréquentes

Comments & Feedback