Gradient Shift
Un dégradé à trois couleurs animé en boucle lente au repos (8 s) accélère à 2 s au survol — la vitesse quadruple par un seul changement de propriété CSS animation-duration. Aucun JavaScript.
Mis à jour le
Cet effet fait partie d'Effect.Labs — 840 effets vanilla, une partie gratuite, une partie premium. Hover comprend 48 effets, dont 5 gratuits. Découvrir la catégorie →
3 exemples d'usage
Comment ça marche
La racine .fx-0360-root centre un bloc .hover-box.hover-gradient-shift de 200 × 200 px. L'élément porte un fond linear-gradient(135deg, #6366f1 0, #ec4899 50%, #f59e0b 100%) 0 0/200% 200% — un dégradé sur 200 % de largeur et hauteur, ce qui permet de déplacer la position du fond pour faire défiler les couleurs.
Deux @keyframes identiques dans leur géométrie (animation de background-position de 0 à 100 % et retour) mais aux noms différents (fx0360-gradientIdle et fx0360-gradientFast) permettent de basculer entre deux durées : 8 s au repos, 2 s au survol. Changer de animation-name au survol redémarre l'animation depuis le début — le fait d'avoir deux noms distincts garantit un vrai redémarrage, non une simple accélération de l'animation courante. L'élément s'agrandit simultanément de scale(1.05).
Les noms fx0360- évitent les collisions. Mesuré dans Chromium 151 : animation lente au repos, accélération visible au survol, deux copies indépendantes.
Accessibilité
- Mouvement réduit : sous
prefers-reduced-motion: reduce, toutes les animations sont arrêtées et le scale annulé ; au survol l'élément affiche unfilter: brightness(1.15)fixe. L'animation continue au repos est également désactivée. - Clavier : l’élément est un
<button>nativement focusable. La règle:focus-visibledéclenche la même accélération du gradient ; un contour indigo signale le focus. - Animation en boucle au repos : l'animation idle (8 s) tourne sans interaction. Sous
prefers-reduced-motion: reduce, elle s'arrête. Sur une page riche en contenu animé, envisagez de démarrer l'animation idle seulement quand l'élément est visible (IntersectionObserver). - Toucher : le premier toucher déclenche l'accélération ; elle reste active jusqu'au prochain toucher.
Compatibilité navigateur
CSS pur (@keyframes, background-position, animation, background-size, :focus-visible, prefers-reduced-motion), aucun JavaScript. Mesuré dans Chromium 151 : animation visible, accélération au survol, deux copies indépendantes. Fonctionne dans tous les navigateurs modernes.
Sans animation, le fond reste statique au repos et au survol. Sans background-size: 200% 200%, le dégradé ne peut pas défiler.
Le code
Structure HTML à coller dans votre page (le CSS + JS sont inclus avec votre achat) :
<div class="fx-0360-root">
<button class="hover-box hover-gradient-shift" type="button">
<span>…</span>
</button>
</div>Paiement unique, sans abonnement — le code est à toi pour toujours
Personnaliser
Options passées à l'API ou attributs data-* :
| Option / propriété | Défaut | Effet |
|---|---|---|
Dégradé de base (CSS — background de .hover-gradient-shift) |
Indigo → rose → ambre sur 200 % × 200 % | Changez les trois couleurs pour votre palette. Gardez 0 0/200% 200% pour que le défilement de position fasse tourner le dégradé. |
Durée au repos (CSS — animation: 8s ease infinite fx0360-gradientIdle) |
8 s par cycle | 12s pour une animation très lente et discrète ; 4s pour une animation plus visible au repos. |
Durée au survol (CSS — animation: 2s ease infinite fx0360-gradientFast) |
2 s par cycle (4× plus vite) | 1s pour une accélération extrême ; 4s pour une accélération plus douce. Le rapport idle/fast définit l'intensité du signal. |
Scale au survol (CSS — transform: scale(1.05)) |
5 % d'agrandissement | Passez à scale(1) pour désactiver l'agrandissement si l'animation de fond seule suffit. |
Noms des @keyframes (CSS — fx0360-gradientIdle / fx0360-gradientFast) |
Préfixés fx0360- | Ne changez les noms que si vous copiez le code dans un environnement où le préfixe entre en conflit. Les deux noms doivent rester différents pour garantir le redémarrage. |
FAQ
animation-name au survol force le navigateur à redémarrer l'animation depuis la position 0. Avec un seul @keyframes, changer seulement animation-duration accélère l'animation sans la redémarrer : la position courante est conservée, ce qui peut créer un saut visuel.animation du sélecteur .hover-gradient-shift et gardez-la uniquement sur :hover et :focus-visible. Le fond sera statique au repos et s'animera uniquement au survol.const restant = endTime - Date.now(); el.style.animationDuration = (restant/1000).toFixed(1)+'s'. La durée décroissante accélère l'animation à mesure que l'heure approche.
