Générateur d'animations CSS @keyframes

Une règle CSS @keyframes est en réalité une petite timeline : un ensemble de jalons en pourcentage, chacun déclarant ce à quoi une propriété doit ressembler à cet instant précis, le navigateur se chargeant d'interpoler tout ce qui se trouve entre les deux. Écrire cela à la main signifie garder simultanément en tête plusieurs de ces jalons pour plusieurs propriétés — ce générateur transforme cette timeline en quelque chose que l'on peut voir et manipuler : une ligne horizontale par propriété, avec un repère pour chaque jalon.

L'élément central est la tête de lecture. Faites-la glisser à n'importe quel point entre 0 % et 100 % et la boîte d'aperçu passe à l'état combiné exact de cet instant — pas l'image clé la plus proche, mais une valeur réellement interpolée de façon linéaire calculée entre les deux points d'arrêt qui encadrent la tête de lecture sur chaque piste active. Les propriétés numériques comme la position, la rotation et l'échelle sont interpolées comme des nombres ; la couleur de fond interpole chaque canal rouge, vert et bleu indépendamment, ce qui permet aux pistes de couleur de passer en fondu par des teintes intermédiaires au lieu de sauter d'une couleur définie à l'autre.

Plusieurs pistes se combinent automatiquement en une seule animation cohérente : chaque propriété de transformation (déplacement, rotation, mise à l'échelle) fusionne en une déclaration transform unique à chaque pourcentage d'image clé, tandis que l'opacité et la couleur de fond restent sur leurs propres lignes, exactement comme dans une vraie CSS écrite à la main. Les pourcentages pour lesquels une piste n'a pas de point d'arrêt explicite sont tout simplement absents des déclarations de cette propriété — l'interpolation d'images clés du navigateur comble l'écart entre les points existants, comme elle le ferait pour n'importe quelle règle @keyframes écrite manuellement.

Cinq préréglages — rebond, secousse, pulsation, fondu et arrivée latérale — chargent une timeline complète prête à être ajustée (incluant une durée, une fonction de timing et un nombre de répétitions raisonnables) en un clic. Cliquez sur Lecture à tout moment pour voir la véritable animation CSS s'exécuter sur l'élément d'aperçu, générée à la volée via une feuille de style injectée dynamiquement, puis copiez le bloc @keyframes complet ainsi que le raccourci .élément-animé { animation: ... } directement dans votre projet. Comme tous les outils de ce site, tout s'exécute en local dans le navigateur et rien n'est jamais transféré.