Générateur d’animations CSS
Créer des animations CSS par images clés avec un éditeur visuel de chronologie
Paramètres de l’animation
Animations prédéfinies
Images clés
0% → 100%
Image clé · 0%
Image clé · 100%
Aperçu en direct
CSS généré
@keyframes myAnimation {
0% {
opacity: 1;
}
100% {
opacity: 1;
}
}
.animated-element {
animation-name: myAnimation;
animation-duration: 1s;
animation-timing-function: ease;
animation-iteration-count: 1;
animation-direction: normal;
animation-fill-mode: none;
animation-delay: 0s;
}Modifiez les images clés et relancez l’animation pour la vérifier.
Exemples rapides de transformations
translateX(100px) / translateY(-50px)rotate(45deg) / rotate(360deg)scale(1.5) / scale(0.5)Exemple : skewX(10deg) / skewY(-5deg)Exemple : perspective(400px) rotateY(180deg)À propos du générateur d'animations CSS
Notre générateur d'animations CSS gratuit vous permet de créer visuellement des animations keyframes professionnelles sans écrire de code complexe à partir de zéro. Configurez chaque aspect de votre animation, de la durée et des fonctions de temporisation jusqu'aux propriétés de chaque keyframe, et voyez le résultat instantanément grâce à un aperçu en direct mis à jour en temps réel.
Que vous ayez besoin d'un effet de fondu discret, d'un rebond accrocheur ou d'une animation personnalisée en plusieurs étapes, cet outil propose 10 modèles intégrés et un éditeur de keyframes complet. Chaque modèle est entièrement personnalisable : vous pouvez les utiliser comme points de départ et affiner chaque propriété, dont transform, opacity et la couleur d'arrière-plan, à n'importe quel pourcentage.
Le générateur produit un code CSS prêt pour la production, propre, avec la syntaxe @keyframes correcte et des propriétés d'animation individuelles. Il suffit de copier le code généré et de le coller dans votre feuille de style. Tout le traitement s'effectue dans votre navigateur, sans envoi vers un serveur, ce qui préserve la confidentialité et la sécurité de votre travail.
Fonctionnalités principales
- Éditeur de keyframes visuel avec contrôles transform, opacity et background-color pour chaque keyframe
- 10 modèles d'animation prêts à l'emploi : Bounce, Fade In, Fade Out, Slide In Left, Slide In Right, Spin, Pulse, Shake, Flip et Zoom In
- Panneau d'aperçu en direct avec relecture instantanée pour tester les animations
- Contrôle complet des propriétés d'animation : durée, fonction de temporisation, nombre d'itérations, direction, mode de remplissage et délai
- Prise en charge d'une fonction de temporisation cubic-bezier personnalisée pour des courbes d'accélération précises
- Ajout et suppression de keyframes à n'importe quel pourcentage (0 %, 25 %, 50 %, 75 %, 100 % ou personnalisé)
- Sortie CSS propre avec @keyframes et propriétés d'animation individuelles, prête pour la production
- Copie dans le presse-papiers en un clic pour une intégration instantanée dans vos projets
- Nommage personnalisé des animations pour un code organisé et sémantique
- Prise en charge complète du mode sombre pour éditer confortablement dans tous les environnements
Comment utiliser le générateur d'animations CSS
- Choisissez un point de départ : sélectionnez l'un des 10 modèles intégrés comme Bounce, Fade In ou Spin, ou partez d'une animation vierge.
- Réglez les propriétés de l'animation : définissez la durée, la fonction de temporisation, le nombre d'itérations, la direction, le mode de remplissage et le délai à l'aide des contrôles intuitifs.
- Modifiez les keyframes : ajoutez, supprimez ou modifiez des keyframes à n'importe quel pourcentage. Définissez les valeurs de transform, l'opacité et les couleurs d'arrière-plan de chaque keyframe.
- Prévisualisez votre animation : regardez l'aperçu en direct se mettre à jour en temps réel. Cliquez sur Rejouer pour relancer l'animation et vérifier le résultat.
- Copiez le code CSS : cliquez sur le bouton Copier le CSS pour copier dans votre presse-papiers le code @keyframes et les propriétés d'animation générés.
- Collez-le dans votre projet : ajoutez le CSS copié à votre feuille de style et appliquez la classe d'animation à vos éléments HTML.
Cas d’usage
- Micro-interactions : ajoutez des effets de survol discrets, des animations de boutons et des signaux de retour pour améliorer l'engagement des utilisateurs.
- Indicateurs de chargement : créez des spinners personnalisés, des effets de pulsation et des animations d'écrans squelettes pour les états de chargement.
- Transitions de page : concevez des effets de glissement, de fondu et de zoom pour les éléments de page qui s'animent au défilement ou au chargement.
- Éléments d'appel à l'attention : concevez des animations de secousse, de rebond et de pulsation pour attirer l'attention des utilisateurs sur les éléments importants de l'interface.
- Prototypage de design system : prototypez rapidement et standardisez les motifs d'animation dans la bibliothèque de composants de votre équipe.
- Apprentissage des animations CSS : expérimentez avec les keyframes, les fonctions de temporisation et les propriétés d'animation dans un environnement visuel.
- Effets de présentation : créez des éléments animés pour des présentations web et des portfolios.
Questions fréquentes
Cet outil est-il gratuit ?
Oui, le générateur d'animations CSS est entièrement gratuit et sans limite d'utilisation. Vous pouvez créer un nombre illimité d'animations, utiliser tous les modèles et copier le code CSS généré sans aucune restriction.
Mes données sont-elles en sécurité ?
Toute la génération et la prévisualisation des animations se font entièrement dans votre navigateur. Aucune donnée n'est envoyée à un serveur : vos configurations d'animation et votre code CSS restent donc totalement privés.
Quels navigateurs prennent en charge les animations CSS ?
Les animations CSS sont prises en charge par tous les navigateurs modernes, dont Chrome, Firefox, Safari, Edge et Opera. Le code généré utilise la syntaxe standard @keyframes, qui fonctionne dans toutes les versions actuelles des navigateurs.
Puis-je combiner plusieurs animations sur un même élément ?
Oui, vous pouvez appliquer plusieurs animations à un même élément en séparant les noms d'animation par des virgules en CSS. Générez chaque animation séparément, puis combinez-les dans votre feuille de style.
Qu'est-ce qu'une fonction de temporisation cubic-bezier ?
Une fonction cubic-bezier définit une courbe d'accélération personnalisée pour votre animation. Elle utilise quatre valeurs pour contrôler les accélérations et les ralentissements, ce qui offre un contrôle précis au-delà des options standard comme ease-in ou ease-out.
Astuces et bonnes pratiques
- Utilisez transform et opacity : animez les propriétés transform et opacity pour obtenir les meilleures performances, car elles peuvent être accélérées par le GPU.
- Gardez des animations discrètes : des animations subtiles (0,2 s-0,5 s) paraissent plus abouties que des animations longues et spectaculaires pour la plupart des interactions d'interface.
- Respectez les préférences des utilisateurs : utilisez la media query prefers-reduced-motion pour désactiver ou réduire les animations pour les utilisateurs qui préfèrent moins de mouvement.
- Choisissez des modes de remplissage adaptés : utilisez « forwards » pour conserver l'état final, « backwards » pour appliquer le premier keyframe pendant le délai, ou « both » pour un contrôle complet.
- Testez sur plusieurs appareils : prévisualisez vos animations sur mobile, où les performances peuvent différer de celles des navigateurs de bureau.