October 30, 2025
When CSS mutes your stream
Springs and bounces in native CSS
CSS learns to bounce — devs cheer, phones freak out
TLDR: CSS’s new linear() brings native springy, bouncy motion to animations, reducing the need for JavaScript. The community is hyped about performance and polish, but one Android user reports a weird volume-drop bug, while power users demand next-level features like math-based easing and a memory-savvy spring — proving the hype is real and hungry.
CSS just got springy, and the crowd is loud. The new linear() timing function lets designers draw motion by connecting dots, so you can get rubbery springs and cartoony bounces without JavaScript. Fans flooded in with praise — “Yet another banger” energy for creator Josh Comeau, plus gushing over the site’s slick visuals and even the unusually “cute” newsletter popup. Folks also loved that this runs smoothly in modern browsers (about 88% support, per Can I Use). And yes, everyone had a giggle over the confusing name clash between old “linear” and new linear() — same word, wildly different powers.
But the real drama? One reader says opening the demo page on Chrome for Android makes their background audio — like a Twitch stream — drop to half volume. Close the tab, sound pops back. Cue the bug hunt: is this some autoplay “ducking” feature or a browser quirk? No verdict yet, just chaos. Meanwhile, power users turned wishlist-mode on: multi-point curves with control points, math-driven easing (sin waves! damping!), and a true spring() that remembers velocity when things change. Translation: the community loves the bounce, but they want the trampoline, the physics lab, and a safety net too.
Key Points
- •CSS linear() is a non-Bézier timing function that creates motion by connecting specified points with straight line segments.
- •It enables spring and bounce-like animations natively in CSS, reducing the need for JavaScript and main-thread overhead.
- •The function takes progress values between 0 and 1, with points evenly spaced across the animation duration.
- •An example transition uses linear(0, 0.1, 0.25, 0.5, 0.68, 0.8, 0.88, 0.94, 0.98, 0.995, 1) to approximate an ease curve.
- •As of October 2025, linear() has around 88% browser support and has been in major browsers since December 2023; fallbacks are discussed later.