Générateur d'animations CSS
Construisez des animations CSS keyframe avec aperçu en direct, contrôles de timing et code prêt à l'emploi
À propos de Générateur d'animations CSS
Créez des animations CSS avec keyframes, aperçu en direct, contrôles de timing et code prêt à l'emploi — tout dans votre navigateur.
Comment utiliser Générateur d'animations CSS
- 1Sélectionnez un type d'animation : Bounce, Fade In/Out, Slide In/Out, Shake, Rotate ou Pulse.
- 2Ajustez la durée et le délai pour contrôler la vitesse et le démarrage de l'animation.
- 3Définissez le nombre d'itérations (boucles) ou choisissez Infini pour une animation continue.
- 4Choisissez la direction (Normal, Reverse, Alternate) et la fonction de timing (ease, linear, cubic-bezier).
- 5Cliquez sur « Replay » pour prévisualiser l'animation, puis copiez le CSS généré.
Astuces
- La direction Alternate crée un effet naturel d'aller-retour — idéal pour les éléments UI qui attirent l'attention.
- Les courbes cubic-bezier personnalisées vous permettent de créer un easing unique qui correspond à votre identité visuelle.
- Gardez la durée sous 300ms pour les micro-interactions et 500-1000ms pour les transitions.
Limites free / payant
Gratuit : animations de base. Starter+ : types d'animations premium.
Outils similaires
Équipe OneKitToolsMise à jour 2.21.4