Générateur d'Animations CSS

Contrôles

1s
0s

Aperçu & CSS

 
   
 
 
   
 
 
 
Comment l'utiliser
 
     
  1. Sélectionnez un préréglage — Choisissez Fondu, Glissement, Rebond ou Pulsation comme point de départ.
    2.  
  2. Définissez la durée — Ajustez le curseur de 0,1 à 5 secondes pour contrôler la vitesse.
    3.  
  3. Choisissez la temporisation — Sélectionnez une fonction d'accélération (ease, linear, cubic-bezier, etc.) pour contrôler l'accélération.
    4.  
  4. Définissez délai & itérations — Ajoutez un délai avant le démarrage et contrôlez le nombre de répétitions.
    5.  
  5. Choisissez direction & remplissage — Contrôlez si l'animation se joue à l'envers ou en alternance, et l'état que l'élément conserve après.
    6.  
  6. Copiez le CSS — Obtenez le bloc @keyframes complet plus le raccourci d'animation.
    7.  
 
 
 
Qu'est-ce que la propriété CSS animation ?
 
Le raccourci CSS animation combine huit sous-propriétés : nom, durée, fonction de temporisation, délai, nombre d'itérations, direction, mode de remplissage et état de lecture. Ensemble, elles pilotent des animations basées sur keyframes purement en CSS — sans JavaScript pour la plupart des effets.
 
@keyframes définit les états. La propriété animation les applique aux éléments. Vous pouvez superposer plusieurs animations en séparant les valeurs par des virgules.
 
 
 
Cas d'usage courants
 
 
Effets d'entrée de page
 
Squelettes de chargement
 
CTA accrocheurs
 
Animations de révélation au défilement
 
Effets de survol d'icônes
 
Notifications toast
 
 
Conseils & bonnes pratiques
 
 
 Préférez transform & opacity 
Animer transform et opacity utilise le thread de composition — bien moins coûteux qu'animer des propriétés de mise en page comme width ou top.
 
 
 Respectez les préférences de mouvement 
Enveloppez les animations dans @media (prefers-reduced-motion: no-preference) pour ne pas affecter les utilisateurs qui préfèrent moins de mouvement.
 
 
 Utilisez fill-mode: both 
fill-mode: both combine forwards et backwards — l'élément démarre dans le premier état keyframe et termine dans le dernier.
 
 
 Décalez avec delay 
Appliquez la même animation à plusieurs éléments avec des délais croissants pour créer des effets d'entrée échelonnés.
 
 
 
Questions fréquentes
 
 
Quelle différence entre animation-direction: alternate et reverse ?
 
reverse joue les keyframes à l'envers à chaque cycle. alternate joue en avant puis en arrière sur les itérations successives, créant un effet de va-et-vient.
 
 
 
Quand utiliser animation-fill-mode: forwards ?
 
Utilisez forwards lorsque vous voulez que l'élément reste dans son état keyframe final après la fin de l'animation — par exemple, un fondu d'apparition qui doit rester visible.
 
 
 
Puis-je animer plusieurs propriétés à la fois ?
 
Oui. Un seul bloc @keyframes peut définir un nombre quelconque de propriétés CSS à chaque étape. Le préréglage Glissement, par exemple, anime simultanément transform et opacity.
 
 
 
Qu'est-ce que cubic-bezier(0.4, 0, 0.2, 1) ?
 
C'est la courbe d'accélération de Material Design de Google — un démarrage rapide avec une décélération douce. Elle donne aux transitions d'interface une sensation naturelle et physique.