Les vrais chiffres derrière la facilité d'entrée en CSS
Concevez une fonction de synchronisation CSS cubique-bezier() personnalisée en faisant glisser deux points de contrôle, prévisualisez-la en direct par rapport à une référence linéaire, puis copiez la valeur prête.
Résultat
Cette page ouvre le générateur de bézier cubique avec x1=0,42, y1=0, x2=0,58, y2=1 déjà chargés — les points de contrôle exacts vers lesquels le mot-clé CSS easy-in-out se développe. Faites glisser l'une des poignées ou modifiez les nombres directement, et la courbe, l'aperçu de l'animation et la chaîne copiable sont tous mis à jour immédiatement.
easy-in-out est l'un des cinq mots-clés de timing CSS intégrés, et il est populaire précisément parce que cette courbe accélère doucement dès le début, maintient un rythme assez régulier au milieu et redescend avant la fin - une forme qui se lit comme naturelle pour la plupart des mouvements de l'interface utilisateur. Le voir comme des points de contrôle explicites au lieu d'un nom de mot-clé montre clairement pourquoi : y1 se trouve près de 0 et y2 se trouve près de 1, tous deux proches de leur x correspondant, il n'y a donc pas de dépassement dans les deux sens.
Utilisez ces quatre nombres comme point de départ plutôt que le mot-clé lui-même chaque fois que vous avez besoin de modifier légèrement la sensation : tirez x1 vers le bas pour un démarrage plus rapide, ou poussez y2 au-dessus de 1 pour transformer cette même forme en un léger dépassement. Chaque modification met à jour instantanément l'aperçu et la ligne cubique-bezier() copiable.