Générateur d'Animations CSS
Un générateur d'animations CSS écrit la règle @keyframes et les propriétés d'animation à votre place. Choisissez l'un des 16 préréglages, déplacez les curseurs Durée et Délai, puis réglez le nombre de répétitions, le sens, la fonction de temporisation et le mode de remplissage : le carré d'aperçu s'anime en direct et le code CSS se met à jour. Cliquez bounce et la ligne abrégée affiche animation: bounce 1s ease 0s infinite normal;
Propriétés d'Animation
Code CSS
Générateur d'Animations CSS
Générez des animations CSS instantanément avec notre constructeur visuel. 16 presets inclus.
Outils populaires
À propos de Générateur d'Animations CSS
Ce générateur construit une animation CSS complète depuis un panneau visuel : plus besoin de retenir l'ordre des propriétés. Seize préréglages sont fournis — bounce, shake, pulse, fadeIn, fadeOut, slideInLeft, slideInRight, slideInUp, rotate, flip, swing, rubberBand, jello, heartBeat, flash et zoomIn — et chaque bouton porte l'identifiant @keyframes exact qu'il va écrire. Cliquer un préréglage recopie aussi cet identifiant dans le champ Nom de l'animation, que vous pouvez ensuite remplacer par ce que votre feuille de style attend.
Six réglages façonnent le résultat. Durée va de 0.1 à 5 secondes par dixièmes, Délai de 0 à 3 secondes. Nombre de répétitions propose 1, 2, 3, 5 ou infinite. Sens couvre normal, reverse, alternate et alternate-reverse ; la fonction de temporisation couvre ease, ease-in, ease-out, ease-in-out, linear, step-start et step-end ; le mode de remplissage couvre none, forwards, backwards et both. Chaque option est écrite avec le mot-clé CSS lui-même, si bien que la liste et le code généré emploient toujours le même terme.
Deux sorties accompagnent l'aperçu. La ligne Notation abrégée est la propriété animation unique, dans l'ordre nom, durée, temporisation, délai, répétitions, sens et — quand il ne vaut pas none — mode de remplissage. Le bloc Code CSS en dessous est la forme longue : la règle @keyframes complète, puis une classe .animated-element avec une propriété par ligne. Le bouton Copier copie la forme longue.
Ce qu'il ne fait pas : il anime un seul élément avec une seule règle de keyframes, sans enchaînement, sans animation liée au défilement et sans transitions CSS. Renommez .animated-element avec votre propre sélecteur après avoir collé, et n'oubliez pas qu'un visiteur ayant activé la réduction des animations mérite une requête prefers-reduced-motion, que vous devez ajouter vous-même.
Cas d'utilisation
Comment utiliser
Cliquez l'un des 16 boutons de préréglage en haut. Chaque bouton affiche le nom @keyframes qu'il va écrire, et le carré d'aperçu s'anime aussitôt.
Réglez les curseurs Durée et Délai. La durée va de 0.1 à 5 secondes et le délai de 0 à 3, tous deux par dixièmes de seconde.
Choisissez un nombre de répétitions et un sens, puis une fonction de temporisation et un mode de remplissage. Chaque option affiche le mot-clé CSS qu'elle produit.
Modifiez le champ Nom de l'animation s'il vous faut un identifiant adapté à votre feuille de style, par exemple loaderPulse au lieu de pulse.
Observez le carré d'aperçu, puis lisez la ligne Notation abrégée pour la version en une propriété, ou le panneau Code CSS pour la règle @keyframes complète.
Appuyez sur Copier pour placer la forme longue dans le presse-papiers, collez-la dans votre feuille de style et remplacez .animated-element par votre sélecteur.
Astuces Pro
- Cliquer un préréglage écrase le contenu du champ Nom de l'animation par l'identifiant du préréglage. Renommez donc l'animation après avoir choisi le préréglage, jamais avant.
- Le délai figure dans la notation abrégée même à 0s, alors que la forme longue omet complètement animation-delay tant que le curseur est à zéro. Les deux sorties sont équivalentes, pas identiques.
- Le mode de remplissage none est la valeur par défaut et disparaît lui aussi de la forme longue. Choisissez forwards si l'élément doit conserver l'état de la dernière keyframe une fois l'animation finie.
- Le curseur Durée s'arrête à 5 secondes et avance par dixièmes. Pour plus lent, copiez le code et modifiez la valeur d'animation-duration à la main : rien d'autre ne change.
- Associez alternate à un nombre de répétitions de 2 pour un aller-retour qui se termine au point de départ. Avec infinite et normal, l'élément resaute à la première keyframe à chaque boucle.
Dépannage
Le nom d'animation que j'avais saisi a disparu.
Cliquer un bouton de préréglage remplace le champ Nom de l'animation par l'identifiant du préréglage : un nom saisi avant est donc écrasé. Choisissez d'abord le préréglage, puis tapez votre nom ; l'aperçu et les deux sorties suivent immédiatement.
Le CSS collé ne fait rien sur ma page.
La règle vise la classe .animated-element, qui n'existe sans doute pas dans votre balisage. Ajoutez cette classe à l'élément ou renommez le sélecteur dans le code collé. Le bloc @keyframes au-dessus doit rester, car animation-name y renvoie.
L'élément revient à sa position de départ quand l'animation se termine.
C'est le mode de remplissage none par défaut : hors de son temps d'exécution, l'élément reprend ses styles normaux. Mettez Mode de remplissage sur forwards pour conserver la dernière keyframe, ou sur both pour appliquer aussi la première pendant le délai.
Questions fréquemment posées
Déclarez une règle @keyframes avec les états voulus, puis reliez un élément à cette règle par les propriétés animation. Ce générateur fait les deux : choisissez un préréglage, réglez durée, délai, répétitions, sens, temporisation et remplissage, puis copiez le panneau Code CSS, qui contient le bloc @keyframes et une classe .animated-element.
Une seule propriété qui les réunit toutes, dans l'ordre nom, durée, fonction de temporisation, délai, nombre de répétitions, sens et mode de remplissage. La ligne Notation abrégée écrit exactement cela : la page s'ouvre sur animation: myAnimation 1s ease 0s infinite normal; et cliquer un préréglage change le nom. Le remplissage n'est ajouté que s'il ne vaut pas none.
Seize : bounce, shake, pulse, fadeIn, fadeOut, slideInLeft, slideInRight, slideInUp, rotate, flip, swing, rubberBand, jello, heartBeat, flash et zoomIn. Chaque bouton porte l'identifiant qui apparaîtra dans la règle @keyframes générée, et un clic recopie cet identifiant dans le champ Nom de l'animation.
Il décide de l'apparence de l'élément en dehors du temps d'exécution de l'animation. none, la valeur par défaut, laisse ses styles normaux. forwards conserve la dernière keyframe une fois l'animation finie, backwards applique la première pendant le délai, et both combine les deux.
ease démarre lentement, accélère puis ralentit à nouveau, ce qui en fait la valeur par défaut du CSS ; linear avance à vitesse constante du début à la fin. Basculez la liste Fonction de temporisation entre les deux et regardez le carré d'aperçu : sur le préréglage rotate, la différence saute aux yeux.
Mettez Nombre de répétitions sur infinite, la valeur avec laquelle ce générateur démarre. La liste propose aussi 1, 2, 3 et 5. Dans le CSS copié cela devient animation-iteration-count: infinite, et dans la notation abrégée c'est la cinquième valeur de la ligne.
Oui. Le champ Nom de l'animation alimente à la fois l'identifiant @keyframes et la propriété animation-name : les deux ne peuvent donc jamais diverger. Choisissez d'abord votre préréglage, car un clic sur un bouton remplace le contenu du champ par l'identifiant du préréglage.
Pour un mouvement simple, oui en pratique : les animations de transform et d'opacity peuvent être prises en charge par le compositeur sans recalculer la mise en page, et aucun script ne tourne à chaque image. Tout ce qui demande de la logique, un enchaînement ou une interaction reste du ressort de JavaScript.
Les propriétés utilisées ici — @keyframes, animation-name, duration, delay, iteration-count, direction, timing-function et fill-mode — sont du CSS sans préfixe, pris en charge par tous les navigateurs actuels, bureau comme mobile. Aucun préfixe constructeur n'est écrit, et aucun n'est nécessaire pour ces préréglages.
Entourez l'animation d'une requête média. Collez le code généré puis ajoutez @media (prefers-reduced-motion: reduce) { .animated-element { animation: none; } } pour que les personnes ayant demandé moins de mouvement n'en subissent pas. Le générateur n'ajoute pas cette règle à votre place.