Générateur d'animation d'images clés CSS

Une règle CSS @keyframes est en réalité une petite chronologie : un ensemble de points de contrôle en pourcentage, chacun déclarant à quoi devrait ressembler une propriété à ce moment précis, le navigateur interpolant tout le reste. En construire un à la main signifie garder plusieurs de ces points de contrôle en pourcentage dans votre tête à la fois sur plusieurs propriétés – ce générateur transforme cette chronologie en quelque chose que vous pouvez réellement voir et faire glisser : une voie horizontale par propriété, avec un marqueur d'arrêt à chaque point de contrôle.

La pièce maîtresse est la tête de lecture Scrub. Faites-le glisser n'importe où entre 0 % et 100 % et la zone d'aperçu passe à l'état combiné exact à cet instant - pas l'image clé la plus proche, mais une véritable valeur interpolée linéairement calculée entre les deux arrêts qui entourent la tête de lecture sur chaque piste active. Les propriétés numériques telles que la position, la rotation et l'échelle sont interpolées sous forme de nombres simples ; background-color interpole chaque canal rouge, vert et bleu indépendamment, ce qui permet à une piste de couleur de s'estomper en douceur à travers les teintes intermédiaires au lieu de sauter entre les couleurs que vous avez réellement définies.

Plusieurs pistes se combinent automatiquement en une animation cohérente : chaque propriété basée sur la transformation (déplacement, rotation, mise à l'échelle) fusionne en une seule déclaration de transformation à chaque pourcentage d'image clé, tandis que l'opacité et la couleur d'arrière-plan restent sur leurs propres lignes, exactement comme le ferait un véritable CSS écrit à la main. Les pourcentages pour lesquels une piste donnée n'a pas d'arrêt explicite sont simplement volontairement exclus des déclarations de cette propriété - la propre interpolation d'images clés du navigateur comble l'écart entre les arrêts existants, de la même manière qu'elle le ferait pour n'importe quelle règle @keyframes que vous avez tapée à la main.

Cinq préréglages (rebond, tremblement, impulsion, fondu et slide-in) chargent une chronologie complète et prête à être modifiée (y compris une durée raisonnable, une fonction de synchronisation et un nombre de répétitions) en un seul clic. Appuyez sur Play à tout moment pour voir la véritable animation CSS exécutée 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 .animated-element {animation: ... } directement dans votre propre projet. Comme tous les outils de ce site, tout s'exécute localement dans le navigateur sans que rien ne soit jamais téléchargé.