Les chiffres réels derrière ease-in-out de CSS
Créez une fonction de timing CSS cubic-bezier() personnalisée en déplaçant deux points de contrôle, prévisualisez-la en direct par rapport à une référence linéaire, puis copiez la valeur prête à l’emploi.
Entièrement traité dans votre navigateur — rien de ce que vous saisissez ici n'est jamais téléchargé.
Résultat
À propos de cet outil
Cette page ouvre le générateur de courbes cubic-bezier 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 ease-in-out se déploie. Déplacez l’une des poignées ou modifiez directement les nombres : la courbe, l’aperçu d’animation et la chaîne copiable se mettent à jour immédiatement.
ease-in-out est l’un des cinq mots-clés de timing intégrés en CSS, et il est populaire précisément parce que cette courbe accélère doucement au départ, maintient une allure assez régulière au milieu, puis ralentit avant la fin — une forme qui paraît naturelle pour la plupart des animations d’interface. La voir sous forme de points de contrôle explicites plutôt que comme un nom de mot-clé rend la raison évidente : y1 est proche de 0 et y2 est proche de 1, tous deux proches de leur x correspondant, donc il n’y a pas de dépassement dans un sens ni dans l’autre.
Utilisez ces quatre nombres comme point de départ plutôt que le mot-clé lui-même chaque fois que vous avez besoin d’ajuster légèrement le ressenti — abaissez x1 pour un démarrage plus vif, ou poussez y2 au-dessus de 1 pour transformer cette même forme en un léger dépassement. Chaque modification met à jour l’aperçu et la ligne cubic-bezier() copiable instantanément.