Comment utiliser : Générateur d'animations CSS au survol
- Choisissez un préréglage de survol, comme Agrandir, Élever, Incliner ou Vibrer.
- Basculez l'aperçu entre bouton, carte, icône et texte, puis survolez-le pour le tester.
- Ajustez la durée, la courbe d'accélération et les images clés jusqu'à obtenir l'effet souhaité.
- Copiez le CSS : il s'applique aussi sur
:focus-visiblepour les utilisateurs au clavier.
Animation au survol ou transition
Pour un simple passage de A à B, une transition suffit et revient en douceur lorsque le pointeur quitte l'élément. Les animations à images clés sur :hover sont plus utiles lorsque l'effet comporte plusieurs étapes (un rebond, une vibration, un balancement) ou doit tourner en boucle pendant le survol. Ce générateur produit les sélecteurs :hover et :focus-visible, afin que les utilisateurs au clavier bénéficient du même retour visuel. Gardez les effets discrets : entre 150 et 300 ms donnent une impression de réactivité.
Ce que vous pouvez créer
- Chronologie d'images clés — ajoutez autant d'images clés que nécessaire, faites-les glisser vers de nouveaux pourcentages et attribuez à chacune sa propre courbe d'accélération.
- Propriétés — translation X/Y, rotation, rotation 3D X/Y, mise à l'échelle, inclinaison, opacité, flou, lueur (box-shadow), couleur de fond et rayon de bordure. Les valeurs manquantes sont interpolées, les transformations ne sautent donc jamais.
- 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 l'animation image par image, ralentissez à ¼ de vitesse et activez la pelure d'oignon pour voir toutes les images clés à la fois.
- 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 en sens inverse 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 ressentent des vertiges ou des nausées à cause du mouvement. Avec l'option Respecter prefers-reduced-motion activée, le CSS désactive l'animation pour les visiteurs ayant activé « réduire les animations » dans leur système d'exploitation. Évitez de faire clignoter plus de trois fois par seconde, 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. N'ajoutez will-change qu'aux éléments qui vont réellement être animés. Façonnez votre courbe avec le générateur cubic-bezier, ajoutez un indicateur de chargement grâce au générateur de loader CSS, et associez vos animations à des ombres portées ou à des dégradés.
Aussi recherché comme : effet survol css, animation hover css, effet hover bouton css, générateur hover css, effet hover carte css, animation au survol css.
Outils complémentaires : Générateur d'animations CSS au survol
- Générateur d’animation CSS — Concevez vos animations CSS sur une vraie timeline de keyframes.
- Générateur Keyframes CSS — Un éditeur visuel pour @keyframes.
- Générateur de glassmorphism — Concevez une carte en verre dépoli avec des curseurs en direct et copiez un CSS compatible avec tous les navigateurs, avec le préfixe -webkit-backdrop-filter et une solution de repli pour les anciens navigateurs.
- 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.
Questions fréquentes
Le CSS généré est-il libre d'utilisation ?
Puis-je modifier une animation que j'ai déjà ?
Comment lancer l'animation lorsque l'élément entre dans la vue ?
animation-timeline: view(), sans JavaScript, dans les navigateurs qui le prennent en charge.Cela fonctionne-t-il avec Tailwind CSS ?
tailwind.config.js pour la v3 et un bloc @theme pour la v4, ce qui vous permet d'utiliser l'animation sous forme de classe animate-*.Quelles propriétés conviennent le mieux à une animation fluide ?
transform et opacity sont traitées par le compositeur GPU et restent fluides même sur des téléphones lents. Le flou, les ombres, les couleurs et les rayons de bordure coûtent davantage : utilisez-les avec modération sur les grands éléments.