Springs and Bounces in Native CSS * Josh W. Comeau

"Introduction When creating animations, we can decide how to transition between states using a timing function. Historically, we've used Bézier curves for this, which provide us with a range of different options: In this demo, each of these circles moves from side to side over the same duration, but they're interpolated very differently. This can dramatically change how the animation feels."

"In the past, we've needed to rely on JavaScript libraries to provide these sorts of interpolations, which introduces a whole bunch of trade-offs; most JavaScript animations run on the main thread, for example, which means they won't run smoothly if other stuff is happening in our application! Fortunately, modern CSS has provided us a new tool that enables us to create springs, bounces, and so much more all in native CSS: the linear() timing function."

Designers can choose timing functions to control transitions; historically cubic Bézier curves provided many options but cannot express all motion. Some animations require springs or bounces that Bézier curves cannot model, leading to JavaScript libraries and main-thread performance trade-offs. Modern CSS adds linear(), a non‑Bezier timing function that models diverse motion natively, enabling springs, bounces, and complex interpolations without JavaScript. The name linear() overlaps confusingly with the existing linear preset, but linear() refers to a different capability. The core idea of linear() is to draw easing curves by specifying a sequence of control points to define interpolation behavior.

Read at Joshwcomeau