![Abstract gradient hero image](data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="1200" height="400"><defs><linearGradient id="g" x1="0" x2="1"><stop offset="0" stop-color="%2366d9ff"/><stop offset="1" stop-color="%238a6cff"/></linearGradient></defs><rect width="100%" height="100%" fill="black" fill-opacity="0.65"/><rect width="100%" height="100%" fill="url(%23g)" fill-opacity="0.10"/></svg>)
This article explains a pattern for adding "shine" sweeps and hover transforms that are fast and Firefox-friendly. The key constraint: only animate transform and opacity. Avoid filters, blend modes, and continuous heavy animations.
What to avoid in Firefox
Don't use backdrop-filter, filter: blur(), mix-blend-mode, or animating box-shadow continuously. These cause repaint storms on some engines. Prefer transform-based motion (translate/scale) which is GPU-accelerated.
Tiny JS, when needed
Attach event listeners only when necessary and clean them up. Avoid pointermove listeners or keep them throttled to rAF and only active while pointer is inside a region. Prefer CSS-only toggles when possible (checkbox hack) to reduce runtime cost.
Examples
Small card
Uses the same GPU-friendly shine tuned for card width ~300px.
Another example
Focus and hover both trigger the sweep (animation runs once per interaction).
Accessible
Keyboard users get the same visual affordance via focus-within with no JS.
No continuous repaint
The animation only moves transform; no filters or blend-modes used.
Conclusion
Transform-only animations and single-play hover sweeps provide pleasing motion without continuous repaint cost. Test on your target browsers (see checklist below) and prefer prefers-reduced-motion respects for users who need reduced motion.