Créer des animations d'images clés CSS avec préréglages, minuterie et contrôles d'itération
Un générateur d'animations CSS vous laisse construire des animations à keyframes visuellement — en choisissant un effet, réglant le timing, l'accélération et le nombre de répétitions — puis copier le CSS, y compris la règle @keyframes et la propriété animation. Les animations CSS font passer un élément par une séquence d'états définis en keyframes, et les écrire à la main signifie jongler avec les pourcentages de keyframe, la durée, la fonction de timing et les réglages d'itération à la fois. Choisir parmi des préréglages et ajuster les contrôles transforme cela en quelques clics.
Ce qui façonne le ressenti d'une animation, c'est la durée, la fonction de timing et le nombre d'itérations. La durée règle la vitesse ; la fonction de timing (ease, linear, ease-in-out et courbes personnalisées) contrôle comment le mouvement accélère et décélère, ce qui sépare une animation d'aspect naturel d'une robotique ; et le nombre d'itérations décide si elle joue une fois ou en boucle. Voir l'effet en aperçu en direct en ajustant cela est bien plus rapide que d'éditer des valeurs et recharger. Cet outil génère du CSS basé sur les standards dans votre navigateur, prêt à coller sur tout élément.
Une règle @keyframes définit les étapes d'une animation en pourcentages de 0% à 100%, chacun spécifiant le style de l'élément à ce point. Le navigateur interpole en douceur entre eux, donc 0% { opacity: 0 } à 100% { opacity: 1 } produit un fondu d'entrée. Le générateur écrit cette règle pour vous.
La fonction de timing contrôle comment la vitesse de l'animation varie sur sa durée. linear se déplace à un rythme constant, tandis qu'ease, ease-in-out et les courbes cubic-bezier personnalisées accélèrent et ralentissent. La bonne accélération rend le mouvement naturel plutôt que mécanique, elle affecte donc fortement le résultat.
Réglez animation-iteration-count sur infinite, ce qui la répète en continu — utilisé pour spinners, pulsations et effets d'ambiance. Un nombre précis la répète ce nombre de fois, et la valeur par défaut de 1 la joue une fois. Le générateur expose cela pour choisir une lecture unique ou une boucle sans fin.
Oui — les animations à keyframes CSS sont largement prises en charge par les navigateurs modernes. Elles s'exécutent aussi efficacement car le navigateur peut les optimiser, et se dégradent gracieusement : si l'animation n'est pas supportée ou réduite, l'élément apparaît simplement dans son état final plutôt que de casser.
Générateur d'ombre de boîte CSS · Générateur de rayon de bordure CSS · Générateur Flexbox · Générateur CSS Grid · Générateur d'ombre de texte CSS · Générateur de filtres CSS