Quelles propriétés transform puis-je animer ?

Vous pouvez animer translateX, translateY, scale et rotate, ainsi qu'opacity. Chaque propriété est définie indépendamment aux arrêts de keyframe 0%, 50% et 100%.

Quelles fonctions de timing sont disponibles ?

Le générateur inclut les préréglages ease, linear, ease-in, ease-out et ease-in-out, ainsi qu'une option cubic-bezier personnalisée pour créer une courbe d'accélération unique.

Puis-je faire boucler l'animation indéfiniment ?

Oui. Réglez le nombre de répétitions sur Infinite et le CSS généré utilisera animation-iteration-count: infinite, faisant boucler l'animation en continu.

Faut-il connaître CSS pour utiliser cet outil ?

Non. Le générateur est entièrement visuel — il suffit de déplacer les curseurs et de sélectionner des valeurs dans les menus déroulants. Le CSS est généré automatiquement et prêt à copier dans n'importe quel projet.

Le CSS généré est-il compatible avec tous les navigateurs modernes ?

Oui. La sortie utilise les @keyframes standard et la propriété raccourcie animation, supportées par tous les navigateurs modernes notamment Chrome, Firefox, Safari et Edge, sans aucun préfixe de fournisseur.

Cet outil téléverse-t-il mes données ?

Non. Tout s'exécute dans votre navigateur, vos données ne quittent jamais votre appareil — et une fois la page chargée, cela marche même hors ligne.

🎬 Générateur de Keyframes CSS

Créez des animations CSS en quelques secondes — définissez transform et opacity à chaque arrêt, prévisualisez l'animation en direct et copiez le code @keyframes prêt à coller. Sans installation ni inscription, entièrement dans votre navigateur.

Nom de l'animation

Durée (s)

Timing

Répéter

Confidentiel par conception. Cet outil fonctionne entièrement dans votre navigateur — rien de ce que vous saisissez n'est téléversé ni stocké, et il marche hors ligne.

À propos

Le Générateur de Keyframes CSS vous permet de créer des animations @keyframes sans écrire une seule ligne de code à la main. Vous définissez les propriétés transform — translate (X et Y), scale et rotate — ainsi qu'opacity à trois points clés : 0%, 50% et 100%. La durée de l'animation, une fonction de timing (ease, linear, ease-in, ease-out, ease-in-out ou un cubic-bezier personnalisé) et le nombre de répétitions (fini ou infinite) sont tous configurables dans le panneau. Un aperçu animé en direct se met à jour instantanément pour vous permettre d'ajuster les valeurs jusqu'à obtenir le mouvement souhaité. Cliquez ensuite sur Copier et le bloc @keyframes complet — incluant la propriété raccourcie animation — est placé dans votre presse-papiers, prêt à coller dans votre feuille de style. Tout s'exécute dans le navigateur sans aucun fichier téléchargé ni donnée envoyée.

Comment l'utiliser

Définissez les valeurs transform — translate X/Y, scale et rotate — et opacity pour l'arrêt à 0% (le début de l'animation).
Ajustez les valeurs à l'arrêt 50% pour définir le point médian du mouvement, ou laissez-les par défaut pour créer une simple transition à deux états.
Définissez les valeurs à l'arrêt 100% pour l'état final, puis configurez la durée (en secondes), la fonction de timing et le nombre de répétitions.
Observez l'aperçu en direct se mettre à jour en temps réel et peaufinez chaque valeur jusqu'à ce que l'animation soit exactement comme vous le souhaitez.
Cliquez sur Copier CSS pour copier le bloc @keyframes complet et la propriété animation dans votre presse-papiers, puis collez-le directement dans votre feuille de style.

FAQ

Quelles propriétés transform puis-je animer ?: Vous pouvez animer translateX, translateY, scale et rotate, ainsi qu'opacity. Chaque propriété est définie indépendamment aux arrêts de keyframe 0%, 50% et 100%.
Quelles fonctions de timing sont disponibles ?: Le générateur inclut les préréglages ease, linear, ease-in, ease-out et ease-in-out, ainsi qu'une option cubic-bezier personnalisée pour créer une courbe d'accélération unique.
Puis-je faire boucler l'animation indéfiniment ?: Oui. Réglez le nombre de répétitions sur Infinite et le CSS généré utilisera animation-iteration-count: infinite, faisant boucler l'animation en continu.
Faut-il connaître CSS pour utiliser cet outil ?: Non. Le générateur est entièrement visuel — il suffit de déplacer les curseurs et de sélectionner des valeurs dans les menus déroulants. Le CSS est généré automatiquement et prêt à copier dans n'importe quel projet.
Le CSS généré est-il compatible avec tous les navigateurs modernes ?: Oui. La sortie utilise les @keyframes standard et la propriété raccourcie animation, supportées par tous les navigateurs modernes notamment Chrome, Firefox, Safari et Edge, sans aucun préfixe de fournisseur.
Cet outil téléverse-t-il mes données ?: Non. Tout s'exécute dans votre navigateur, vos données ne quittent jamais votre appareil — et une fois la page chargée, cela marche même hors ligne.