Filter Animated
Un @keyframes anime hue-rotate, saturate et brightness en boucle continue au survol — les teintes de l'élément défilent sur 360° ; will-change: filter accélère le rendu. 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-0356-root centre un bloc .hover-box.hover-filter-animated de 200 × 200 px sur fond #0a0a0f. L'élément porte un dégradé de base indigo-violet et déclare will-change: filter pour préparer le GPU au rendu des filtres.
Au survol (ou au focus), l'animation fx0356-filterAnim s'enclenche en boucle infinie (animation: 3s linear infinite). Sur trois étapes elle fait passer hue-rotate de 0° à 360°, saturate de 1 à 1,4 puis 1,2, et brightness de 1 à 1,15 puis 1,05 : les teintes défilent sur tout le spectre pendant que la saturation pulse légèrement. L'élément s'agrandit simultanément de scale(1.05). À la sortie du survol, la propriété transition: .4s adoucit le retour à l'état de repos.
Le préfixe fx0356- sur le nom de l'animation évite les collisions avec d'autres effets. Mesuré dans Chromium 151 : animation visible en boucle, deux copies sur une page — seule celle survolée s'anime. Note de rendu : un dégradé fixe tourne en teintes via hue-rotate ; la couleur perçue dépend du dégradé de base. Pour tester d'autres couleurs de base, modifiez background de .hover-filter-animated.
Accessibilité
- Mouvement réduit : sous
prefers-reduced-motion: reduce, l'animation est désactivée et le scale annulé ; au survol l'élément affiche unfilter: brightness(1.15) saturate(1.2)fixe — le changement est visible sans mouvement continu. - Clavier : l’élément est un
<button>nativement focusable. La règle:focus-visibledéclenche la même animation de teinte ; un contour indigo signale le focus. - Contenu : les filtres CSS affectent l'élément entier, y compris le texte. Sur des couleurs de base claires, vérifiez que le texte reste lisible dans toutes les phases de hue-rotate.
- Toucher : le premier toucher déclenche la boucle de filtres ; elle reste active jusqu'au prochain toucher.
Compatibilité navigateur
CSS pur (@keyframes, filter, hue-rotate, saturate, brightness, will-change, :focus-visible, prefers-reduced-motion), aucun JavaScript. Mesuré dans Chromium 151 : animation de filtres visible, deux copies indépendantes. filter disponible depuis Chrome 18, Firefox 35, Safari 9.1.
Sans filter (très anciens navigateurs), l'élément reste à son état de base au survol. Sans will-change, les filtres fonctionnent mais peuvent être moins fluides sur du matériel ancien.
Le code
Structure HTML à coller dans votre page (le CSS + JS sont inclus avec votre achat) :
<div class="fx-0356-root">
<button class="hover-box hover-filter-animated" 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-filter-animated) |
linear-gradient(135deg, #6366f1, #8b5cf6) |
La couleur de base détermine le spectre parcouru par hue-rotate. Un dégradé rouge-orange (#ef4444, #f97316) tourne vers vert-cyan ; un dégradé bleu tourne vers vert-rouge. Testez sur une image pour des effets photo. |
Durée de la boucle (CSS — animation: 3s linear infinite) |
3 s par tour complet | 6s donne une rotation lente et contemplative ; 1s la rend très rapide. Gardez linear pour une rotation régulière. |
Amplitude du hue-rotate (CSS — de 0deg à 360deg) |
Tour complet | Limitez à 120deg pour rester dans une plage de couleurs proche ; 360deg parcourt tout le spectre. Les valeurs intermédiaires de saturate et brightness définissent les pics de l'animation. |
Scale au survol (CSS — transform: scale(1.05)) |
5 % d'agrandissement | Passez à scale(1) pour désactiver l'agrandissement si l'animation de filtre seule suffit. |
Transition de sortie (CSS — transition: .4s) |
400 ms | .2s pour un retour brusque, .8s pour un retour progressif. Ajoutez cubic-bezier pour une décélération personnalisée. |
FAQ
background-image ou imbriquez un ![]()
.hover-filter-animated. L'animation de filtres s'applique à tout le contenu de l'élément, y compris les images.will-change: filter confie le rendu au GPU et l'animation est généralement fluide. Sur un mobile d'entrée de gamme, réduisez la fréquence (augmentez la durée) ou désactivez le scale pour alléger.@keyframes par des valeurs de hue-rotate qui restent dans votre palette : si votre couleur de base est à 220° (bleu-indigo), un hue-rotate de 0° à 30° oscille dans les bleus proches. Utilisez un outil de roue chromatique pour repérer les angles.
