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
- Sélectionnez un préréglage d'animation : Fade In/Out, Slide Down/Up, Scale In, Spin, Pulse, Bounce ou Shake.
- Personnalisez les paramètres : durée, easing, délai, nombre d'itérations (1, 2, 3 ou infini), direction et mode de remplissage.
- Modifiez le nom de l'animation si nécessaire.
- Observez l'aperçu en direct. Cliquez sur Replay pour revoir l'animation.
- 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.