Générateur d'Animation CSS

Générez des animations CSS keyframe visuellement. Choisissez le type d'animation, la durée, l'accélération et les itérations — obtenez un code CSS prêt à copier.

Animation preset:

Duration (s)

Delay (s)

Easing

Iterations

Direction

Fill Mode

Preview

Generated CSS

@keyframes fadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

.animated-element {
  animation-name: fadeIn;
  animation-duration: 0.6s;
  animation-timing-function: ease;
  animation-iteration-count: 1;
  animation-fill-mode: both;
}

/* Shorthand */
.animated-element {
  animation: fadeIn 0.6s ease 0s 1 both;
}

Comment utiliser Générateur d'Animation CSS

1Sélectionnez un préset d'animation (fade, slide, bounce, spin, etc.).
2Ajustez la durée, le délai, l'accélération et le nombre d'itérations.
3Prévisualisez l'animation en direct dans le navigateur.
4Copiez les keyframes CSS générées et la propriété animation.

ZenovayAnalytics

Sachez ce que vos visiteurs font vraiment.

Suivi des visiteurs en temps réel
Vie privée d'abord, sans bandeau cookies
Installé en deux minutes

Découvrir Zenovay

Outils connexes

Générateur de gradient CSS

Créez de beaux gradients CSS avec un éditeur visuel. Gradients linéaires, radiaux et coniques.

Générateur d'Ombre de Boîte CSS

Concevez des ombres de boîte CSS avec des contrôles visuels. Ajustez le décalage, le flou, l'étalement et la couleur.

Générateur de Rayon de Bordure CSS

Créez des valeurs de rayon de bordure personnalisées avec des contrôles visuels. Liez ou dissociez les coins pour un ajustement rapide.

Zone de jeu CSS Flexbox

Apprenez et générez des mises en page CSS Flexbox visuellement. Ajustez la direction, l'alignement, l'enveloppe et l'écart en temps réel.

Questions fréquemment posées

Quelle est la différence entre les transitions CSS et les animations ?▾

Les transitions CSS animent un changement de propriété entre deux états déclenchés par un événement (hover, focus, changement de classe) : transition: opacity 0.3s ease. Les animations CSS utilisent @keyframes pour définir des séquences en plusieurs étapes qui s'exécutent automatiquement : animation: fadeIn 1s ease forwards. Les transitions sont plus simples pour les effets de survol ; les animations conviennent mieux aux effets continus (indicateurs de chargement), aux effets d'entrée ou aux séquences en plusieurs étapes qui s'exécutent sans interaction utilisateur.

Que sont les fonctions d'accélération (easing) ?▾

Les fonctions d'accélération contrôlent la progression d'une animation dans le temps. Linear : vitesse constante. Ease : début lent, milieu rapide, fin lente (par défaut). Ease-in : début lent, fin rapide. Ease-out : début rapide, fin lente (bon pour les animations de sortie). Ease-in-out : lent aux deux extrémités. cubic-bezier(x1, y1, x2, y2) : courbe personnalisée. steps(n) : étapes saccadées/discrètes (bon pour les animations de sprites).

À quoi sert animation-fill-mode ?▾

animation-fill-mode contrôle les styles appliqués lorsque l'animation n'est pas en cours : none (par défaut) — aucun style des keyframes ne s'applique avant/après. forwards — les styles du dernier keyframe restent après la fin de l'animation. backwards — les styles du premier keyframe s'appliquent pendant la période de délai. both — combine forwards et backwards. Pour les animations d'entrée (comme fadeIn), utilisez fill-mode: both pour éviter que l'élément clignote dans son état pré-animation.

Comment déclencher des animations au scroll ?▾

CSS uniquement : utilisez la propriété animation-play-state. Ajoutez une classe avec animation-play-state: running via JavaScript lorsque l'élément défile dans la vue avec IntersectionObserver. CSS moderne : l'API @scroll-timeline et animation-timeline: scroll() permet des animations pilotées par le défilement en CSS pur dans Chrome 115+. Une approche simple : ajoutez une classe "animate" avec JavaScript lorsque l'élément entre dans la fenêtre d'affichage, puis définissez des animations CSS sur cette classe.

Dois-je utiliser des animations CSS ou JavaScript ?▾

Les animations CSS sont préférées pour les animations simples et discrètes — elles s'exécutent sur le thread du compositeur et évitent la mise en page/peinture si possible. JavaScript (Web Animations API, GSAP, Framer Motion) est préférable pour : le séquençage complexe, les animations interactives, le mouvement basé sur la physique et les animations dépendant de valeurs au moment de l'exécution. La Web Animations API donne à JavaScript le contrôle sur les animations CSS : element.animate([...keyframes], { duration: 300 }). GSAP est la référence pour les animations complexes.