La page s’ouvre sur @keyframes kivMotion à 1400 ms, ease, une itération, avec des images clés à 0 %, 50 % et 100 %, et chaque image clé porte sa position, son déplacement, sa rotation, son échelle et son opacité. L’aperçu rejoue la même déclaration animation que le panneau d’export et les deux blocs sont écrits dans l’ordre des positions.
Fonctionne localement dans votre navigateurLa page s’ouvre sur @keyframes kivMotion à 1400 ms, ease, une itération, avec des images clés à 0 %, 50 % et 100 %. L’aperçu utilise exactement la même déclaration animation que le panneau d’export : ce que vous rejouez est ce que vous copiez.
Chaque champ numérique a une limite mesurée : durée 100-20000 ms, position 0-100 %, opacité 0-1, déplacement ±300 px, rotation ±720°, échelle 0-4 et de deux à huit images clés. Une valeur hors limite est réécrite à la limite quand le champ perd le focus ; un champ vide restaure la valeur précédente au lieu de passer à zéro.
L’export contient la règle @keyframes avec un bloc par image clé, triés par position, puis la déclaration .animated-element. Les blocs sortent par position même si les images clés ont été ajoutées dans un autre ordre ; la liste conserve votre ordre et affiche la position de chaque entrée.
La forme courte est animation: <nom> <durée>ms <fonction> 0ms <itérations> both. Deux images clés peuvent partager la même position : les deux blocs sont exportés et le dernier au même pourcentage est écrit en dernier.
Ajouter une image clé coupe le plus grand écart et arrondit le milieu : depuis les trois valeurs par défaut, les suivantes tombent à 25, 75, 13, 38 et 63 % (liste finale 0, 13, 25, 38, 50, 63, 75, 100). À huit images clés, Ajouter est désactivé ; à deux, Supprimer signale qu’il en faut au moins deux.
Les limites s’appliquent quand le champ perd le focus : 150 est enregistré comme 100, -50 comme 0, une opacité de 3 comme 1, une échelle de 5 comme 4, translate 400px comme 300px et rotate 900deg comme 720deg. Vider un champ restaure la valeur précédente. Liste, chronologie et export portent toujours les valeurs enregistrées : une image clé à 150 % n’est plus écartée par l’analyseur CSS.
Seuls transform et opacity sont animés par image clé : pas de couleur, de filtre ou de fond par image clé, ni de contrôle animation-delay, direction, fill ou play-state, et la classe exportée est toujours .animated-element. Tout s’exécute dans la page : manipuler les contrôles n’envoie aucune requête réseau.
L’accélération vient du menu ; l’entrée overshoot écrit cubic-bezier(0.34, 1.56, 0.64, 1) plutôt que le mot. Pas de glisser-déposer sur la chronologie, pas d’export GIF ou vidéo et pas de second élément de comparaison ; les positions répétées sont autorisées et les deux blocs sont exportés.