Choisissez ce qui s’anime et en combien de temps, décrivez l’état vers lequel l’élément se déplace, puis basculez l’aperçu avant de copier les deux règles générées.
Fonctionne localement dans votre navigateurLe générateur renvoie une paire de règles : une règle de base qui porte la transition abrégée — propriété, durée, courbe et délai — et une règle cible avec la transformation, l’opacité, la couleur de fond et le filtre vers lesquels l’élément évolue. Basculer l’élément d’aperçu exécute cette paire sur un vrai nœud du DOM.
Chaque contrôle est exporté tel que l’indicateur l’affiche. Les valeurs restent dans la plage inscrite à côté du champ, et un champ vidé revient à sa dernière valeur valide au lieu d’exporter un zéro. Le calcul se fait dans la page : rien n’est envoyé et l’outil continue de fonctionner hors ligne.
La première règle porte la transition abrégée : quelle propriété s’anime, pendant combien de temps, avec quelle courbe et quel délai. La seconde décrit l’état cible — transformation, opacité, couleur de fond et un léger filtre de luminosité et de saturation — et s’applique au basculement de l’élément.
Seules les propriétés listées dans la transition s’animent. Si la liste indique opacity, la transformation, la couleur et le filtre de la règle cible s’appliquent d’un coup ; avec all, chaque valeur différente bouge en même temps. L’aperçu se comporte de la même façon.
Le sélecteur propose all, transform, opacity, background-color et filter — les cinq choses que modifie l’élément d’aperçu. En nommer une garde la liste courte, ce qu’un état hover ou focus demande le plus souvent ; all reste le choix sûr pendant les essais.
Les préréglages chargent ce choix : Hover lift anime all, Fade anime opacity, Zoom et Soft spin animent transform, et Color swap anime background-color. Les autres contrôles décrivent quand même l’état cible : vous pouvez donc modifier un préréglage et garder ce qui vous convient.
La durée va de 0 à 5000 ms et le délai de 0 à 3000 ms ; les deux sont arrondis au milliseconde entière. La liste des courbes contient les cinq mots-clés CSS et deux courbes de Bézier cubiques, et l’indicateur affiche toujours la valeur présente dans la règle exportée.
Comme les nombres sont bornés à la plage inscrite sur le champ, la règle exportée ne porte jamais une valeur que le navigateur écarterait ou relirait autrement — un temps négatif, par exemple, est lu comme un délai et non comme une durée. Testez les règles copiées sur l’élément réel : une transformation sur un ancêtre se compose avec celle que vous animez.