Understanding CSS Timing Functions
By Stephen Greig
People of the world, strap yourself in and hold on tight, for you are about to experience truly hair-raising excitement as you get to grips with the intricacies of the hugely interesting CSS timing function!
OK, so the subject matter of this article probably hasn’t sent your blood racing, but all jokes aside, the timing function is a bit of a hidden gem when it comes to CSS animation, and you could well be surprised by just how much you can do with it.
First of all, let’s set the scene and ensure we’re all familiar with the scenarios in which the timing function is relevant. As alluded to, the functionality becomes available when you’re working in the realm of CSS animation, which includes CSS transitions as well as keyframe-based animation. So, what exactly is it and what does it do?
The CSS Timing Function Explained
It’s one of the less obvious animation-based CSS properties, whereas most of its counterparts are rather self-explanatory. Nevertheless, the gist of it is that it enables you to control and vary the acceleration of an animation — that is, it defines where the animation speeds up and slows down over the specified duration.
While it does not affect the actual duration of an animation, it could have profound effects on how fast or slow the user perceives the animation to be. If you’re not sold having learned of its actual purpose, then stick with me here because the timing-function property gets a lot more interesting than the definition suggests.
Note: There is no actual property named “timing-function.” When I refer to this “property,” I am actually referring to both the transition-timing-function and the animation-timing-function properties.
div {
transition-property: background;
transition-duration: 1s;
transition-delay: .5s;
transition-timing-function: linear;
}
/* This could, of course, be shortened to: */
div {
transition: background 1s .5s linear;
}div {
transition: 1s;
}
/* This is the same as saying: */
div {
transition: all 1s 0s ease;
}
But that’s a bit boring. While the defaults are often sufficient for standard hover events and such, if you’re working on something a little more substantial, then the timing function is a serious trick for fine-tuning an animation!
Anyway, you now have an idea of what the timing function does. Let’s look at how it does it.
Looking Under the Hood
Many of you probably don’t look past the available keywords for the timing-function property, of which there are five: ease (the default), ease-in, ease-out, ease-in-out and linear. However, these keywords are simply shorthands for defining the Bézier curve.
The what?
You might not be familiar with the term, but I’d wager that you’ve actually seen a Bézier curve — heck, if you’ve used graphical editing software, then you’ve probably even created one! That’s right, when you use the Pen or Path tool to create a nice smooth curve, then you’re drawing a Bézier curve! Anyway, to get to the point of this section,the Bézier curve is the magic behind the timing function; it basically describes the acceleration pattern on a graph.
This Bézier curve translates to the ease keyword.
If you’re anything like me the first time I saw a Bézier curve like this, then you might be wondering how on earth that curve could be formed from four points plotted on a graph! I couldn’t possibly tell you in words, but, fortunately, I have a particularly fantastic GIF to do the job for me, courtesy of Wikipedia.
Because this curve is formed from four points, we refer to it as a “cubic” Bézier curve, as opposed to a “quadratic” curve (three points) or a “quartic” curve (five points).
Introducing The cubic-bezier() Function
Now then, this is where things get really exciting, as I reveal that you can actually get access to this curve through the cubic-bezier() function, which can simply be used in place of the keywords of the timing-function property value. I appreciate that you may need a moment to contain your excitement…
With the cubic-bezier() function, you can manipulate the Bézier curve whichever way you desire, creating completely custom acceleration patterns for your animation! So, let’s look at how this function works and how it enables you to create your very own Bézier curve.
First, we know that the curve is formed by four points, which are referred to as point 0, point 1, point 2 and point 3. The other important thing to note is that the first and last points (0 and 3) are already defined on the graph, with point 0 always sitting at 0,0(bottom left) and point 3 always sitting at 1,1 (top right).
That leaves just point 1 and point 2 available for you to plot on the graph, which you can do using the cubic-bezier() function! The function takes four parameters, the first two being the x and y coordinates of point 1 and the latter two being the x and y coordinates of point 2.
transition-timing-function: cubic-bezier(x, y, x, y);To get comfortable with the syntax, as well as with how it creates the curve and with its physical effect on the animation, I’ll take you through the five timing-function keywords, their equivalent cubic-bezier() values and the resulting effect on the animation.
EASE-IN-OUT
Let’s start with the ease-in-out keyword because the logic behind this curve and how it translates to the animation are probably the easiest to understand.
