Fonctions d’accélération : ease, linear, cubic-bezier

Une fonction d'accélération contrôle la courbe de vitesse d'une transition ou d'une animation : elle détermine la rapidité avec laquelle celle-ci accélère ou ralentit pendant sa durée.

linear conserve une vitesse constante pendant toute la transition. Cette fonction est utile pour les barres de chargement et les indicateurs de progression qui doivent avancer régulièrement.

ease démarre rapidement, puis ralentit vers la fin. Il s'agit de la valeur par défaut, qui donne un résultat naturel pour la plupart des transitions d'interface.

ease-in démarre lentement puis accélère. Cette fonction convient aux éléments qui quittent l'écran (animations de sortie).

ease-out démarre rapidement puis ralentit. Cette fonction convient parfaitement aux éléments qui entrent à l'écran : ils arrivent avec énergie puis se stabilisent progressivement.

ease-in-out démarre et se termine lentement, avec un mouvement plus rapide au milieu. Cette fonction convient particulièrement aux animations en boucle ou aux animations aller-retour.

Définit une courbe de Bézier cubique personnalisée avec quatre points de contrôle. Cette fonction permet de créer des courbes d'accélération de type ressort ou personnalisées.

Les quatre valeurs définissent deux points de contrôle : cubic-bezier(x1, y1, x2, y2). Des valeurs supérieures à 1 sur l'axe y créent des effets de dépassement, semblables à un ressort. Utilisez des outils comme easings.net pour visualiser les courbes.

steps(n, direction) divise l'animation en n étapes discrètes de même durée. Cette fonction est idéale pour les animations de sprites et les effets de machine à écrire.

Le deuxième argument détermine l'emplacement de l'étape :

• jump-start : première étape à l'instant 0
• jump-end : dernière étape à la fin (par défaut)
• jump-both : étapes au début et à la fin
• jump-none : aucune étape à l'une ou l'autre extrémité

La nouvelle fonction linear() permet de définir des courbes d'accélération arbitraires au moyen de plusieurs points, ce qui permet de créer des effets de ressort et de rebond en CSS pur, sans les limites de cubic-bezier.

Quelle fonction d'accélération conserve une vitesse constante pendant toute la transition ?

Les fonctions d'accélération contrôlent les courbes de vitesse des animations. Options intégrées : linear, ease, ease-in, ease-out, ease-in-out. Les courbes personnalisées utilisent cubic-bezier(). Les étapes discrètes utilisent steps(). La nouvelle fonction linear() permet de créer des courbes complexes semblables à des ressorts.