🔧

Générateur d'animation CSS

Générateurs & Design · Outil en ligne gratuit

Éditer visuellement les keyframes et générer @keyframes.

Équipe CoderNewbieDernière mise à jour : 2026-09-20

Fonctionnalités

Nom de l'animation

Durée2s

Délai0s

Fonction de minutage

Itérations

Direction

Images clés

Scale 1Opacity 100%

Scale 1.15Opacity 60%

Aperçu

Code CSS

@keyframes pulse {
  from {
    transform: scale(1);
    opacity: 1;
  }
  to {
    transform: scale(1.15);
    opacity: 0.6;
  }
}

.animated {
  animation: pulse 2s ease-in-out 0s infinite alternate;
}

Éditeur de keyframes

Réglez les valeurs from/to de scale et opacity avec des curseurs.

Toutes les propriétés

Durée, délai, timing, itérations et direction couverts.

Aperçu en temps réel

Voyez l'animation se jouer immédiatement pendant que vous l'ajustez.

Comment utiliser Générateur d'animation CSS

1Configure the generator settings (colors, size, format, etc.).
2Enter any required input text or data.
3Click generate to create the output.
4Download or copy the generated result.

Fonctionnalités

✓100% gratuit — sans inscription, sans abonnement, sans publicité
✓Fonctionne entièrement dans votre navigateur — vos données ne quittent jamais votre appareil
✓Rapide et léger — résultats instantanés
✓Multiplateforme — compatible ordinateur, tablette et mobile