Générateur d'animation CSS
Créez des animations CSS @keyframes à partir de préréglages ou de vos images clés : durée, délai, répétitions, sens, mode de remplissage et courbe cubic-bezier.
Préréglages
Images clés
Une règle par ligne, p. ex. 50% { transform: scale(1.2); }. Modifiez librement ; l’aperçu se met à jour en direct.
Minutage
Aperçu
@keyframes bounce {
0%, 20%, 50%, 80%, 100% { transform: translateY(0); }
40% { transform: translateY(-30px); }
60% { transform: translateY(-15px); }
}
.animated {
animation: bounce 1s ease 0s infinite normal both;
}
@media (prefers-reduced-motion: reduce) {
.animated {
animation: none;
}
}Outils Connexes
Voir ToutQu'est-ce que Générateur d'animation CSS ?
Construit une animation CSS complète : la règle @keyframes, la notation abrégée animation et une surcharge prefers-reduced-motion facultative. Partez de préréglages comme fondu, glissement, rebond, pulsation, secousse, rotation ou battement de cœur, modifiez librement les images clés et façonnez le minutage avec une courbe cubic-bezier déplaçable.
Comment utiliser Générateur d'animation CSS
- Choisissez un préréglage ou saisissez vos propres Images clés (une règle par ligne).
- Réglez le Nom de l'animation, la Durée et le Délai.
- Choisissez le Sens, le Mode de remplissage et soit Répéter indéfiniment, soit un Nombre de répétitions.
- Choisissez une Fonction de temporisation ou faites glisser les poignées cubic-bezier / saisissez X1, Y1, X2, Y2.
- Cliquez sur Rejouer pour la revoir, puis copiez le code CSS.
Exemple
Pulse preset, iterations 3, direction alternate, delay 0.5s, cubic-bezier(0.68, -0.6, 0.32, 1.6), reduced-motion off
@keyframes pulse {
0%, 100% { transform: scale(1); }
50% { transform: scale(1.1); }
}
.animated {
animation: pulse 1s cubic-bezier(0.68, -0.6, 0.32, 1.6) 0.5s 3 alternate both;
} Quand utiliser Générateur d'animation CSS
Utilisez-le pour des effets d'entrée, des indicateurs de chargement, des signaux d'attention et des micro-interactions. Pour de simples changements d'état (couleur au survol, taille), une transition CSS suffit. Gardez l'option de réduction des animations activée pour que les utilisateurs qui demandent moins de mouvement à leur système ne soient pas affectés par de grands déplacements.
Comment fonctionne Générateur d'animation CSS
Le texte des images clés est encadré par @keyframes nom { … } et les réglages sont écrits dans l'ordre standard de la notation abrégée nom durée fonction-de-temporisation délai nombre-de-répétitions sens mode-de-remplissage. L'éditeur de Bézier limite les valeurs X à 0–1 (comme l'exige CSS) tandis que Y peut dépasser pour un assouplissement de type rebond ; quand les quatre valeurs correspondent à un mot-clé CSS (ease, linear, ease-in, ease-out, ease-in-out), le mot-clé est écrit à la place. Le nom est nettoyé pour devenir un identifiant CSS valide. L'aperçu utilise un nom de keyframes privé pour ne jamais entrer en conflit avec les animations de la page.
Cas d'utilisation courants
- Animations d'entrée en fondu ou en glissement
- Indicateurs de chargement rotatifs et pulsants infinis
- Retour par secousse sur une saisie de formulaire invalide
- Indicateurs de défilement qui rebondissent
- Assouplissements personnalisés pour un mouvement propre à une marque
Questions Fréquentes
À quoi sert le mode de remplissage ?
forwards conserve la dernière image clé après la fin de l'animation, backwards applique la première image clé pendant le délai, both fait les deux et none n'applique ni l'un ni l'autre.
Pourquoi les valeurs X de la courbe de Bézier sont-elles limitées à 0–1 ?
X représente le temps, qui ne peut pas reculer : CSS rejette donc les valeurs hors de 0–1. Y représente la progression et peut dépasser pour créer une anticipation ou un rebond.
Qu'ajoute l'option de réduction des animations ?
Un bloc @media (prefers-reduced-motion: reduce) qui définit animation: none pour les utilisateurs ayant activé la réduction des animations dans leur système d'exploitation.