Implementing Spring and Bounce Animations with CSS's New Linear() Timing Function
By
feross
7mo ago· 15 min readen
100/100
Golden Brown
Bagelometer↗
An everything bagel for the brain. Substantive, layered, well-seasoned.
Score100Typehow-toSentimentpositive
Summary
The article explores the new CSS `linear()` timing function that enables physics-based animations like springs and bounces directly in native CSS, without requiring JavaScript libraries. It explains how this function works, its advantages over traditional Bézier curves for simulating natural motion, and provides practical tips and tricks for implementing effective spring animations. The author shares insights from personal experimentation with the API, highlighting both its capabilities and current limitations.
Key quotes
· 4 pulledThe 'linear()' timing function is a game-changer; it allows us to model physics-based motion right in vanilla CSS!
Bézier curves are great, but there are certain things they just can't do.
In the past, we've needed to rely on JavaScript libraries to provide these sorts of interpolations, which introduces a...
I've been experimenting with this API for a while now, and in this post, I'll share all of the tips and tricks I've learned for using it effectively.
The “linear()” timing function is a game-changer; it allows us to model physics-based motion right in vanilla CSS! That said, there are some limitations and quirks to be aware of. I’ve been experimenting with this API for a while now, and in this post, I’
