jquery.app
Francais
EnglishDeutschFrancaisEspanol日本語Nederlands

Outils CSS et design

Gratuit Générateur d'Animation CSS Keyframes

Générez des animations CSS @keyframes prêtes à l'emploi avec neuf motifs de mouvement prédéfinis. Choisissez parmi fade, slide, scale, spin, pulse, bounce et shake, puis personnalisez la durée, l'easing, le délai et l'itération.

Chargement de l'outil...

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

Le Générateur d'Animation CSS Keyframes crée des règles @keyframes complètes et des propriétés animation shorthand à partir de motifs de mouvement prédéfinis. Chaque animation nécessite une règle @keyframes et une propriété animation.

Réponse rapide

Choisissez parmi neuf préréglages d'animation et personnalisez la durée, l'easing, le délai, l'itération, la direction et le mode de remplissage. Obtenez une règle @keyframes complète plus le CSS animation shorthand.

Last updated: 2026-06-11

Limites

  • La règle @keyframes utilise la syntaxe from/to. Les pourcentages personnalisés doivent être ajoutés manuellement.
  • L'outil génère une seule animation à la fois.
  • L'aperçu en direct utilise un élément statique.

Sources:MDN Web Docs · W3C Specifications · jquery.app on GitHub

Comment utiliser cet outil

  1. Sélectionnez un préréglage d'animation : Fade In/Out, Slide Down/Up, Scale In, Spin, Pulse, Bounce ou Shake.
  2. Personnalisez les paramètres : durée, easing, délai, nombre d'itérations (1, 2, 3 ou infini), direction et mode de remplissage.
  3. Modifiez le nom de l'animation si nécessaire.
  4. Observez l'aperçu en direct. Cliquez sur Replay pour revoir l'animation.
  5. Copiez la sortie complète – règle @keyframes plus sélecteur .element.

A quoi il sert

  • Générer une animation d'apparition pour une modale avec fadeIn, ease-out et fill-mode forwards.
  • Créer une animation de rotation continue pour un spinner de chargement avec Spin et easing linéaire.
  • Construire une animation pulse pour un bouton d'appel à l'action avec le préréglage Pulse.

Cas d'usage

Exemples concrets

Exemple

Animation d'entrée de notification toast

Un développeur choisit Slide Down, durée 0,4s avec ease-out et fill-mode forwards. Le @keyframes glisse la notification de translateY(-20px) à sa position naturelle.

Exemple

Spinner de chargement de tableau de bord

Un designer UI choisit Spin, durée 1,2s avec easing linéaire et itération infinie. La rotation continue est appliquée à une icône SVG.

Erreurs frequentes

  • Utiliser animation au lieu de transition pour les effets de survol simples.
  • Définir un long délai sans fill-mode: backwards.
  • Oublier de tester les performances d'animation sur mobile.

Vérification

  1. Sélectionnez le préréglage Fade In. Vérifiez @keyframes fadeIn avec from { opacity: 0 } to { opacity: 1 }.
  2. Sélectionnez Spin avec itération infinie. Vérifiez animation: spin 1.5s linear 0s infinite normal.

FAQ

Questions sur Générateur d'Animation CSS Keyframes

Quelle est la différence entre ease, ease-in, ease-out et linear ?

ease commence lentement, accélère au milieu et ralentit à la fin. ease-in accélère. ease-out ralentit. linear maintient une vitesse constante.

Quand utiliser animation-fill-mode: forwards ?

Utilisez forwards lorsque l'élément doit conserver son état final après l'animation. Pour les animations en boucle, le mode de remplissage est généralement inutile.

Puis-je combiner plusieurs animations sur le même élément ?

Oui, CSS prend en charge plusieurs animations séparées par des virgules. Combinez-les manuellement après les avoir générées individuellement.

Outils lies

Autres outils outils css et design

Outils CSS et design

Générateur de carrousel CSS

Générez le balisage d’un carrousel CSS natif avec scroll-snap, boutons de défilement, repères de défilement et structure de liste accessible. Aucun JavaScript requis.

Ouvrir l'outil

A essayer aussi

A essayer aussi