Générateur d'animations CSS

Il crée des animations @keyframes de manière visuelle. Choisissez un préréglage ou définissez des arrêts d'images clés, ajustez la durée/le délai/le timing/la direction, prévisualisez en direct et copiez le CSS/SCSS/Tailwind.

Oui. Sélectionnez cubic-bezier (personnalisé) et un éditeur de courbe visuel apparaît avec des champs x1/y1/x2/y2. La valeur obtenue est appliquée à la fois à l'aperçu en direct et au code généré.

Elle émet un extrait tailwind.config.js qui étend theme.keyframes/animation pour les utilitaires animate-<nom>. Le CSS @keyframes brut est inclus en repli.

Oui, le CSS Animation Generator est 100% gratuit, sans inscription, sans frais cachés et sans limite d'utilisation. Tout le traitement s'effectue localement dans votre navigateur, garantissant une confidentialité totale.

Absolument. Le CSS Animation Generator traite tout côté client, dans votre navigateur. Aucune donnée n'est envoyée ni stockée sur un serveur. Votre contenu reste privé sur votre appareil à tout moment.

Oui, le CSS Animation Generator est entièrement responsive et fonctionne sur smartphones et tablettes. Vous pouvez l'utiliser sur n'importe quel appareil doté d'un navigateur web moderne, sans aucun téléchargement d'application.

Aucun compte ni inscription n'est nécessaire. Ouvrez simplement le CSS Animation Generator dans votre navigateur et commencez à l'utiliser immédiatement. Il n'y a ni barrière d'inscription ni restriction d'utilisation.

Le CSS Animation Generator prend en charge un large éventail de formats et de langages populaires. Consultez l'interface de l'outil pour la liste complète des options prises en charge.

Saisissez simplement votre entrée dans le champ prévu, ajustez les paramètres selon vos préférences, et l'outil la traitera instantanément. Vous pouvez ensuite copier le résultat dans le presse-papiers ou le télécharger.

Le CSS Animation Generator fonctionne sur tous les navigateurs modernes, dont Chrome, Firefox, Safari, Edge et Opera. Pour une expérience optimale, utilisez la dernière version de votre navigateur préféré.

Une transition CSS anime une propriété entre deux états et ne se déclenche qu'en réponse à un événement, comme un survol ou un changement de classe, en passant en douceur de l'ancienne à la nouvelle valeur. Une animation CSS utilise @keyframes pour définir de nombreuses étapes intermédiaires le long d'une timeline, et peut démarrer d'elle-même dès le chargement de l'élément, boucler indéfiniment, s'inverser ou alterner de direction. Les transitions conviennent aux changements d'état simples et ponctuels, comme un fondu de couleur sur un bouton, tandis que les animations gèrent des mouvements à plusieurs étapes tels qu'un rebond, un spinner, ou une séquence qui traverse plusieurs pourcentages entre 0 % et 100 %. Ce générateur construit la voie @keyframes, en vous laissant définir chaque point de passage, régler le minutage et le nombre d'itérations, prévisualiser en direct, et copier du code CSS, SCSS ou Tailwind propre.

Par défaut, une animation CSS n'affecte le style d'un élément que pendant sa lecture ; avant qu'elle ne démarre et après qu'elle se termine, l'élément revient à ses styles normaux. La propriété fill-mode change ce comportement. « forwards » maintient l'élément sur son dernier keyframe (100 %) une fois l'animation terminée, si bien qu'un fondu d'entrée reste visible au lieu de disparaître. « backwards » applique le premier keyframe (0 %) pendant tout délai précédant le début de la lecture, ce qui évite un flash de l'état non animé. « both » combine les deux, en conservant l'image de départ pendant le délai et l'image de fin ensuite, ce qui est le choix le plus sûr pour les effets d'entrée. « none » désactive tout cela. Choisir le mauvais mode fait scintiller votre élément aux bords de la lecture. Le générateur propose les quatre valeurs, vous pouvez donc basculer le fill mode et observer la réaction de l'aperçu en direct avant de copier le code.

Réglez le nombre d'itérations sur « infinite » au lieu d'un nombre fixe. Le nombre d'itérations indique au navigateur combien de fois jouer le @keyframes du début à la fin ; une valeur de 1 le joue une fois, 3 le joue trois fois, et « infinite » le répète indéfiniment jusqu'à ce que l'élément soit retiré ou que l'animation soit mise en pause. Pour un spinner fluide et sans fin, il vous faut aussi une fonction de minutage « linear » afin que chaque rotation se déroule à vitesse constante sans accélération à la jonction de la boucle, plus un seul keyframe qui fait pivoter de 0 à 360 degrés. Le préréglage Spin de ce générateur est déjà configuré ainsi, mais vous pouvez appliquer le même nombre infini d'itérations à n'importe quel préréglage pour créer des effets de pulsation, d'oscillation ou de respiration. Réglez les itérations sur infinite, choisissez un easing linear si vous voulez une boucle sans à-coup, prévisualisez, puis copiez le résultat.

Une fonction de minutage cubic-bezier contrôle la façon dont une animation accélère et décélère sur sa durée, et elle est définie par deux points de contrôle notés x1, y1, x2, y2. Les valeurs de x doivent rester entre 0 et 1 car elles représentent la progression dans le temps, tandis que les valeurs de y peuvent descendre sous 0 ou dépasser 1 pour créer des effets de dépassement ou d'anticipation, comme une valeur qui bondit au-delà de sa cible avant de se stabiliser. Le premier point façonne l'accélération en début de course ; le second façonne la décélération en fin de course. Les easings nommés familiers ne sont que des préréglages : ease-in correspond approximativement à cubic-bezier(0.42, 0, 1, 1), par exemple. L'éditeur de courbe visuel de cet outil vous permet de glisser ou de saisir les quatre chiffres, et redessine instantanément la courbe et l'aperçu en direct, afin d'affiner la sensation avant de copier le résultat.

Ce retour brutal se produit parce que, par défaut, une animation cesse de styliser l'élément dès qu'elle se termine, si bien que l'élément revient à ce que dicte son CSS de base. Si votre keyframe à 0 % règle l'opacité à 0 et que l'état normal de l'élément est également invisible, un fondu d'entrée terminé disparaîtra. La solution est animation-fill-mode : utilisez « forwards » pour que l'élément conserve son keyframe à 100 % après la fin de l'animation, ou « both » pour couvrir aussi un éventuel délai de départ. Un saut au début d'une boucle signifie généralement que vos keyframes à 0 % et à 100 % ne correspondent pas, ce qui empêche la timeline de se poursuivre sans coupure. Le générateur aide à repérer ces deux problèmes : réglez un fill mode, alignez votre premier et votre dernier point de passage, et utilisez le bouton Replay pour observer la transition à répétition jusqu'à ce qu'elle soit parfaitement fluide, avant de copier le CSS.