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.

Outils liés

Ratio d’aspect · calculateur Calculez un ratio d’aspect (16:9…) et déduisez une dimension proportionnelle manquante. Générateur de code-barres Générez un code-barres (EAN-13, Code128, UPC) à partir d’une valeur, téléchargeable, dans le navigateur. Base64 → image Décodez une data URI ou du Base64 en image affichée et téléchargeable, dans le navigateur. Border-radius CSS · générateur Créez des coins arrondis CSS (border-radius) avec aperçu en direct et code à copier. Box-shadow CSS · générateur Générez une ombre portée CSS (box-shadow) avec aperçu en direct et code à copier. Fond vert → transparent Rendez transparente une couleur de fond (fond vert/bleu) d’une image et exportez un PNG, dans le navigateur.