Aller au contenu
TextArray1.87.0
Tout en local

Générateur de transitions et d'easing CSS

Créez une règle de transition CSS à partir de courbes prédéfinies ou de points cubic-bezier personnalisés, avec un graphique texte du mouvement.

11
Sortie
Outils connexes
Générateur CSS clamp()Outils de développement
Générateur de box-shadow CSSOutils de développement
Convertisseur d'unités CSSOutils de développement
différence de clé i18nOutils de développement
Convertisseur TOML en JSONOutils de développement
SQL vers JSONOutils de développement
Générateur de transitions et d'easing CSS
Choisissez les propriétés que vous voulez animer, définissez une durée et un délai, et cet outil rédige la règle de transition pour vous — en CSS simple ou en bloc de configuration Tailwind que vous pouvez coller directement dans tailwind.config.js. Il couvre les courbes nommées courantes (linear, ease, ease-in, ease-out, ease-in-out) plus ease-out-back, une courbe qui dépasse son objectif avant de se stabiliser, ce qui n'est pas un mot clé CSS natif et doit toujours s'écrire comme cubic-bezier().
Sous la règle générée, un graphique texte trace la progression de la courbe à chaque point dans le temps — de 0 au début de l'animation à 1 à la fin, avec une barre pour chaque échantillon pour que vous voyiez l'accélération et tout dépassement sans ouvrir les outils de développement. Passez à « Custom cubic-bezier() » et entrez vos propres quatre points de contrôle pour prévisualiser une courbe que quelqu'un vous a donnée, ou une que vous avez copiée depuis un outil de conception ; les premier et troisième points doivent rester entre 0–1 sur l'axe des temps (c'est une exigence CSS), mais les valeurs y peuvent aller au-delà de 0–1, ce qui est exactement comment fonctionnent les animations bounce et back.
Le champ propriétés prend une liste séparée par des virgules — transform, opacity, background-color, ou une propriété CSS personnalisée comme --panel-width — et l'outil rédige une ligne par propriété pour que la règle soit facile à lire. Durée et délai sont en millisecondes ; le nombre de lignes du graphique est ajustable de 2 à 41 pour une lecture plus grossière ou plus fine de la courbe.
Tout s'exécute localement dans votre navigateur : rien de ce que vous entrez n'est envoyé nulle part. Copiez le résultat, téléchargez-le sous forme de fichier .txt, ou renvoyez la sortie directement à l'entrée pour continuer à l'ajuster.
FAQ
Qu'est-ce que "ease-out-back" fait réellement ?
Il dépasse brièvement la valeur finale avant de se stabiliser — utile pour une carte qui devient légèrement plus grande avant d'atterrir à sa taille finale. Parce que ce n'est pas un mot clé CSS intégré, le générateur l'écrit toujours comme une fonction cubic-bezier() complète.
Pourquoi la courbe personnalisée restreint-elle mes valeurs x mais pas mes valeurs y ?
La spécification CSS exige que les deux points de contrôle x d'une cubic-bezier() restent entre 0 et 1 pour que le temps avance toujours ; les points de contrôle y sont libres d'aller au-delà de cette plage, ce qui est exactement ce qui produit les effets de dépassement et de rebond.
Que signifient les nombres dans le graphique ?
Chaque ligne est un échantillon dans le temps, de t=0 (début de l'animation) à t=1 (fin de l'animation), avec la valeur de sortie de la courbe à ce moment et une barre dimensionnée en fonction de celle-ci — donc une ligne avec une valeur supérieure à 1 ou inférieure à 0 montre que la courbe dépasse son objectif.
Puis-je utiliser la sortie Tailwind directement ?
Oui. C'est un bloc theme.extend prêt à coller dans tailwind.config.js, avec la durée, le délai, la liste des propriétés et la timing function chacun sous une clé "custom" que vous pouvez renommer pour s'adapter à vos jetons de conception.
Mon CSS est-il téléchargé quelque part ?
Non. La règle de transition et le graphique de courbe sont tous deux générés entièrement dans votre navigateur — rien de ce que vous entrez ici n'est envoyé à un serveur.