Générateur d'animation CSS
Créez une animation CSS en direct : 15 effets (fondu, glissement, rebond, pulsation…), durée, délai, courbe, répétitions. Code @keyframes prêt à copier.
- Gratuit
- Sans inscription
- Aucun fichier envoyé
- Windows, Mac, Android, iPhone
Chargement de l'outil…
À propos de cet outil
Donnez vie à vos interfaces sans bibliothèque : 15 animations CSS prêtes (fondu, glissements, zoom, rebond, pulsation, secousse, rotation, retournement…) dont vous réglez la durée, le délai, la courbe de vitesse, les répétitions, la direction et le remplissage. Le code @keyframes est prêt à copier, avec une version qui respecte la réduction des mouvements.
Dans quels cas l'utiliser ?
Apparition du contenu
Un glissement vers le haut de 0,5 s sur les cartes d'une page rend son chargement plus agréable.
Attirer l'attention
Une pulsation discrète sur un bouton ou une secousse sur un champ en erreur guident le regard sans texte supplémentaire.
Indicateurs de chargement
Une rotation infinie et linéaire fait un indicateur de chargement en quelques lignes.
Mode d'emploi
- Choisissez un effet d'animation.
- Réglez la durée, le délai, la courbe et les répétitions.
- Copiez le code @keyframes et la règle animation.
Comment ça marche
Chaque effet est une suite d'étapes @keyframes qui n'utilise que transform et opacity, les deux propriétés les plus fluides à animer. L'aperçu injecte ces étapes sous un nom propre, pour ne jamais entrer en conflit avec les animations du site.
La propriété animation est écrite en raccourci : nom, durée, courbe, puis délai, répétitions, direction et remplissage seulement s'ils diffèrent des valeurs par défaut.
Conseils pour un bon résultat
- Entre 200 et 500 ms pour les animations d'interface : au-delà, elles paraissent lentes.
- ease-out convient aux apparitions, ease-in aux disparitions.
- Évitez les animations infinies sur du texte à lire : elles fatiguent.
- Décalez légèrement le délai de chaque carte pour un effet en cascade.
Problèmes fréquents et solutions
L'élément revient à sa place à la fin
Ajoutez animation-fill-mode: forwards (ou both) pour garder l'état final.
L'élément apparaît puis disparaît pendant le délai
Avec un délai, utilisez both pour que l'état de départ (invisible) s'applique tout de suite.
L'animation ne se rejoue pas
Une animation CSS ne se joue qu'une fois par affichage. Pour la relancer, retirez puis remettez la classe en JavaScript.
Questions fréquentes
Qu'est-ce que @keyframes ?
Une règle CSS qui décrit les étapes d'une animation (de 0 % à 100 %). La propriété animation l'applique à un élément avec une durée, une courbe et un nombre de répétitions.
À quoi sert animation-fill-mode ?
Il dit quoi afficher avant et après l'animation. « both » garde l'état de départ pendant le délai et l'état final à la fin : indispensable pour les apparitions.
Les animations CSS sont-elles performantes ?
Oui, surtout celles qui n'utilisent que transform et opacity, comme tous les effets proposés ici : le navigateur les calcule sur la carte graphique.
Comment respecter les personnes sensibles au mouvement ?
L'onglet « Avec réduction » ajoute une règle prefers-reduced-motion qui coupe l'animation quand l'utilisateur l'a demandé dans son système.
Recherches associées
Toujours bloqué ?
Posez votre question sur le forum : la catégorie, l'outil, la fiche de votre appareil et le résultat du test seront déjà remplis.