CSS cubique Générateur de Bézier

Bézier Documentation Documentation

Qu’est-ce qu’une courbe de Bézier cubique ?

A cubic Bezier curve is defined by four points: P0, P1, P2, and P3. In CSS transitions, P0 and P3 are fixed at (0, 0) and (1, 1) respectively, representing the start and end of the transition. The curve is determined by the coordinates of the two control points, P1 and P2.

Syntaxe

transition-timing-function: cubic-bezier(x1, y1, x2, y2);

Cas

Transitions animées :Créez des animations fluides pour les éléments modifiant les propriétés.
Effets de défilement :Contrôlez la vitesse des animations de défilement.
Éléments interactifs :Définissez la façon dont les éléments réagissent aux interactions de l’utilisateur, comme le survol ou le clic.
Motion Design :créez des séquences de mouvement complexes pour les éléments de l’interface utilisateur.

Démarre

Ease (default)

lentement, accélère rapidement, puis ralentit à nouveau.

cubic-bezier(0.25, 0.1, 0.25, 1)

Linear

Vitesse constante du début à la fin.

cubic-bezier(0, 0, 1, 1)

Ease-in

Démarre lentement, puis accélère.

cubic-bezier(0.42, 0, 1, 1)

Ease-out

Démarre vite, puis ralentit.

cubic-bezier(0, 0, 0.58, 1)

Conseils pour la création de courbes

Gardez les valeurs x entre 0 et 1 :Les valeurs en dehors de cette plage peuvent provoquer un comportement inattendu.
Visualiser la courbe :Utilisez le graphique interactif pour comprendre comment les modifications affectent l’animation.
Testez avec des éléments réels :prévisualisez toujours votre courbe avec des composants d’interface utilisateur réels pour vous assurer qu’elle vous convient.
Enregistrer les préréglages :Marquez les courbes utiles pour de futurs projets.