Générateur d'animation CSS @keyframes avec aperçu

Générez une animation CSS @keyframes (fondu, glissé, rebond…) avec aperçu et code.

Durées

▸CSS

@keyframes pulse {
  0%,100% { transform: scale(1); }
  50% { transform: scale(1.15); }
}
.element {
  animation: pulse 1s ease-in-out infinite;
}

🔒 100 % côté client — aucune donnée envoyée

Créez des animations CSS @keyframes et copiez le code prêt à l'emploi, avec un aperçu en direct. Ajustez les étapes, la durée et le timing sans écrire une ligne à la main. L'outil s'exécute intégralement dans votre navigateur, sans aucun envoi de données.

À quoi ça sert ?

▸ Prototyper une animation de bouton ou d'icône
▸ Générer le code @keyframes sans le mémoriser
▸ Visualiser une animation avant intégration
▸ Ajuster la durée et l'easing en temps réel

FAQ

Puis-je copier le code CSS généré ?

Oui, le code @keyframes complet est prêt à coller.

L'aperçu est-il en direct ?

Oui, chaque modification met à jour l'animation immédiatement.

Puis-je choisir la fonction de timing ?

Oui, réglez durée, easing et répétitions.