Filter Animated
A @keyframes continuously animates hue-rotate, saturate and brightness in a loop on hover — the element's hues cycle through 360°; will-change: filter speeds up rendering. No JavaScript.
Updated
This effect is part of Effect.Labs — 840 vanilla effects, some free, some premium. Hover has 48 effects, including 5 free. Explore the category →
3 usage examples
How it works
The .fx-0356-root root centers a .hover-box.hover-filter-animated block of 200 × 200 px on a #0a0a0f background. The element has a base indigo-violet gradient and declares will-change: filter to prepare the GPU for filter rendering.
On hover (or focus), the fx0356-filterAnim animation starts in an infinite loop (animation: 3s linear infinite). Over three steps it rotates hue-rotate from 0° to 360°, pulses saturate from 1 to 1.4 then 1.2, and brightness from 1 to 1.15 then 1.05: hues cycle through the entire spectrum while saturation pulses slightly. The element simultaneously scales up by scale(1.05). On hover-out, the transition: .4s property smooths the return to rest.
The fx0356- prefix on the animation name prevents collisions. Measured in Chromium 151: looping animation visible, two copies on a page — only the hovered one animates. Rendering note: hue-rotate cycles the hues of a fixed gradient; perceived color depends on the base gradient.
Accessibility
- Reduced motion: under
prefers-reduced-motion: reduce, the animation is disabled and the scale cancelled; on hover the element shows a fixedfilter: brightness(1.15) saturate(1.2)— the change is visible without continuous motion. - Keyboard: the element is a natively focusable
<button>. The:focus-visiblerule triggers the same hue animation; an indigo outline marks the focus state. - Content: CSS filters affect the entire element including text. On light base colors, verify that text stays readable in all hue-rotate phases.
- Touch: the first touch triggers the filter loop; it stays active until the next touch.
Browser compatibility
Pure CSS (@keyframes, filter, hue-rotate, saturate, brightness, will-change, :focus-visible, prefers-reduced-motion), no JavaScript. Measured in Chromium 151: filter animation visible, two independent copies. filter available from Chrome 18, Firefox 35, Safari 9.1.
Without filter (very old browsers), the element stays at its base state on hover. Without will-change, filters work but may be less smooth on old hardware.
The code
HTML structure to paste into your page (the CSS + JS come with your purchase):
<div class="fx-0356-root">
<button class="hover-box hover-filter-animated" type="button">
<span>…</span>
</button>
</div>One-time payment, no subscription — the code is yours forever
Customize
Options passed to the API or data-* attributes:
| Option / property | Default | Effect |
|---|---|---|
Base gradient (CSS — background of .hover-filter-animated) |
linear-gradient(135deg, #6366f1, #8b5cf6) |
The base color determines the spectrum traversed by hue-rotate. A red-orange gradient (#ef4444, #f97316) rotates toward green-cyan; a blue gradient rotates toward green-red. Test on an image for photo effects. |
Loop duration (CSS — animation: 3s linear infinite) |
3 s per full rotation | 6s gives a slow, contemplative rotation; 1s makes it very fast. Keep linear for a steady rotation. |
Hue-rotate range (CSS — from 0deg to 360deg) |
Full rotation | Limit to 120deg to stay within a close color range; 360deg covers the full spectrum. |
Scale on hover (CSS — transform: scale(1.05)) |
5% enlargement | Switch to scale(1) to disable the enlargement if the filter animation alone is sufficient. |
Exit transition (CSS — transition: .4s) |
400 ms | .2s for an abrupt return; .8s for a gradual one. |
FAQ
background-image or embed an ![]()
.hover-filter-animated. The filter animation applies to all content of the element, including images.will-change: filter offloads rendering to the GPU and the animation is generally smooth. On a budget mobile, increase the duration or disable the scale to reduce load.
