Comment utiliser : Générateur Keyframes CSS
- Choisissez un préréglage (survolez les vignettes pour l'aperçu) ou partez d'une image clé vierge.
- Définissez la durée, le délai, les itérations, l'easing et le déclencheur (chargement, survol, clic, défilement).
- Modifiez les images clés sur la timeline : cliquez pour en ajouter une, faites-la glisser pour la déplacer, puis ajustez ses propriétés avec les curseurs.
- Parcourez, ralentissez ou activez la pelure d'oignon pour affiner, puis copiez le CSS, le Tailwind ou le HTML.
Fonctionnement des @keyframes
Une règle @keyframes liste les styles qu'un élément doit avoir à différents moments de l'animation, exprimés en pourcentages (from correspond à 0 %, to à 100 %). Le navigateur interpole toutes les valeurs intermédiaires. Des images clés aux styles identiques peuvent partager un sélecteur, comme 0%, 100% { … }, et chaque image clé peut définir sa propre animation-timing-function pour le segment qui la suit.
Ce que vous pouvez créer
- Timeline d'images clés — ajoutez autant d'images clés que nécessaire, déplacez-les à de nouveaux pourcentages et donnez à chacune son propre easing.
- Propriétés — translation X/Y, rotation, rotation 3D X/Y, échelle, inclinaison, opacité, flou, lueur (box-shadow), couleur de fond et rayon de bordure. Les valeurs manquantes sont interpolées, ce qui évite les sauts dans les transformations.
- Déclencheurs — au chargement, au survol, au clic, lorsque l'élément entre dans la vue, ou une animation pilotée par le défilement en CSS seul.
- Décalage — animez une liste élément après élément avec une seule propriété personnalisée CSS.
- Inspection — mettez en pause, parcourez image par image, ralentissez à ¼ de vitesse et activez la pelure d'oignon pour voir toutes les images clés en même temps.
- Export — notation abrégée ou détaillée en CSS, HTML, JavaScript, Tailwind v3 et v4, un mixin SCSS, un fichier de démonstration autonome ou un lien de partage.
La notation abrégée de animation
| Élément | Exemple | Signification |
|---|---|---|
| nom | fade-in-up | La règle @keyframes à exécuter |
| durée | 0.6s | Durée d'un cycle |
| fonction de temporisation | cubic-bezier(.33,1,.68,1) | Courbe de vitesse entre les images clés |
| délai | 0.2s | Attente avant le départ ; les valeurs négatives démarrent en cours de route |
| nombre d'itérations | infinite | Nombre de cycles |
| sens | alternate | Lecture à l'envers un cycle sur deux |
| mode de remplissage | both | Conserve la première image avant et la dernière après la lecture |
Accessibilité
Certaines personnes ont des vertiges ou des nausées à cause du mouvement. Lorsque l'option Respecter prefers-reduced-motion est activée, le CSS désactive l'animation pour les visiteurs qui ont activé « réduire les animations » dans leur système d'exploitation. Évitez les clignotements de plus de trois fois par seconde et gardez les animations en boucle discrètes, ou proposez un moyen de les mettre en pause.
Conseils de performance
Animez transform et opacity plutôt que top, left, width ou margin, qui forcent un recalcul de la mise en page à chaque image. Ajoutez will-change uniquement aux éléments sur le point d'être animés. Affinez votre easing avec le générateur cubic-bezier, ajoutez un indicateur de chargement avec le générateur de loader CSS, et associez vos animations à des ombres portées ou à des dégradés.
Aussi recherché comme : keyframes css, générateur @keyframes, éditeur keyframe css, animation keyframes css, éditeur timeline css.
Outils complémentaires : Générateur Keyframes CSS
- Générateur d’animation CSS — Concevez vos animations CSS sur une vraie timeline de keyframes.
- Générateur d'animations CSS au survol — Concevez des animations au survol pour boutons, cartes, liens et icônes.
- Calculateur de colliers de serrage — Saisissez une taille minimale et maximale ainsi que la plage de la fenêtre d'affichage — obtenez une valeur adaptée au zoom clamp() , accompagnée d’explications mathématiques, d’un aperçu en temps réel et d’une échelle complète de la typographie fluide ou de l’espacement.
- Convertisseur PX en REM — Convertissez entre pixels, rem et em avec votre propre taille de police racine, ou collez une feuille de style entière pour convertir toutes les valeurs px d’un coup.
Questions fréquentes
Le CSS généré est-il libre d'utilisation ?
Puis-je modifier une animation que j'ai déjà ?
Comment démarrer l'animation lorsque l'élément apparaît à l'écran ?
animation-timeline: view() sans JavaScript, dans les navigateurs qui le prennent en charge.Est-ce compatible avec Tailwind CSS ?
tailwind.config.js pour la v3 et un bloc @theme pour la v4, ce qui vous permet d'utiliser l'animation comme classe animate-*.Quelles propriétés sont les meilleures pour une animation fluide ?
transform et opacity sont gérés par le compositeur GPU et restent fluides, même sur les téléphones lents. Le flou, les ombres, les couleurs et les rayons de bordure coûtent davantage : utilisez-les avec parcimonie sur les grands éléments.