Qu'est-ce que Générateur d'animations CSS ?

Creez des animations CSS avec keyframes visuellement, sans ecrire de code a la main. Definissez les keyframes, choisissez les fonctions de temporisation, ajustez la duree et les delais, puis copiez le CSS directement dans votre projet. Fonctionne bien pour les boutons, les loaders, les effets au survol et les transitions de page.

Choisissez parmi une bibliothèque de plus de quarante animations prêtes à l'emploi, classées en Fondu, Glisser, Zoom, Rotation, Rebond, Attention, Sortie et Chargeurs, ou construisez les vôtres à partir de zéro. Chaque keyframe règle opacité, échelle, rotation, translate X et Y, inclinaison X et Y, flou, rayon de bordure, ombre portée et couleur d'arrière-plan. Vous avez déjà un bloc @keyframes ? Collez-le dans la fenêtre d'import et l'éditeur visuel reconstruit chaque étape. Mettez la prévisualisation en pause puis faites glisser le curseur rouge pour inspecter n'importe quelle image intermédiaire ; la sortie est du CSS @keyframes brut, prêt à coller dans n'importe quelle feuille de style.

Comment utiliser

1. Choisissez un preset d'animation (fade, slide, bounce, rotate) ou partez de zéro en ajoutant des keyframes sur la timeline.
2. Ajustez les propriétés à chaque keyframe — transform, opacité, couleur, échelle — et affinez la courbe d'accélération, la durée et le nombre d'itérations.
3. Prévisualisez l'animation en temps réel, puis copiez le code CSS @keyframes généré ou téléchargez-le sous forme de fichier .css.

Quand l'utiliser

• Ajouter des animations d'entrée à des hero sections, modals ou cartes au chargement de la page.
• Concevoir des micro-interactions de boutons, comme un léger zoom au survol ou un shake en cas d'erreur de formulaire.
• Prototyper des spinners de chargement et des skeletons avant de les brancher dans le framework.

Résultat

Un développeur frontend a besoin d'une animation d'entrée fluide pour des cartes sur une page portfolio. Il configure une animation ease-out de 0,6s qui apparaît en fondu depuis 20px plus bas, copie le CSS et l'applique avec un délai décalé par carte.

FAQ

Quelle différence entre les animations et les transitions CSS ?

Les transitions passent une fois de l'état A à l'état B sur un déclencheur (hover, focus, changement de classe). Les animations suivent une règle @keyframes avec autant d'étapes intermédiaires que vous voulez, peuvent boucler et démarrent au chargement sans intervention de l'utilisateur.

Pourquoi mon animation joue une fois puis disparaît ?

L'élément revient à ses styles de base quand l'animation se termine. Mettez animation-fill-mode à forwards pour conserver les valeurs du dernier keyframe, ou à both si vous voulez aussi que le premier keyframe s'applique pendant tout délai éventuel.

Quel easing donne un ressenti naturel ?

Pour les entrées, ease-out ralentit en fin de course et l'animation paraît posée. Pour les sorties, ease-in fait l'inverse. cubic-bezier(0.34, 1.56, 0.64, 1) donne un léger rebond qui sonne joueur sans être ridicule.

Ces animations marchent-elles sur les vieux navigateurs ?

@keyframes est pris en charge par tous les navigateurs sortis après 2013, sans préfixe vendor. Si vous ciblez IE 10 ou antérieur, il vous faudra le préfixe -webkit-, mais cet usage est aujourd'hui largement sous le seuil qui justifie du CSS en plus.

Comment faire boucler l'animation à l'infini ?

Mettez iteration-count à infinite et combinez avec direction: alternate ; chaque cycle inverse l'animation, ce qui donne un va-et-vient fluide (parfait pour pulse et shake) plutôt qu'un retour brutal au début.

Outils similaires