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:
ease-in ease-in-out ease Run Animation
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.
Bézier curves are great, but there are certain things they just can’t do. For example:
spring bounce Run Animation
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. In this blog post, I’ll show you how it works, and share some tools you can use to get started right away!
Intended audience This blog post assumes that you’re familiar with CSS transitions. If you haven’t used them much, you can learn all of the prerequisites you’ll need from this post: An Interactive Guide to CSS Transitions (opens in new tab)
Argh, the naming! CSS comes with several built-in preset Bézier curves, like ease-in and ease-out . One of those presets is called linear , which maintains a constant speed throughout the transition. This tutorial is about something different. linear() is a special non-Bézier timing function that allows us to model all kinds of different motion. Unfortunately, this has led to the very confusing situation where the linear timing function preset and the linear() timing function are two different things! 😅 The name “linear()” actually does make sense, for reasons we’ll see shortly. To reduce confusion, I will always refer to this alternative timing function as linear() , with the parentheses.
... continue reading