Ready to watch this entire course?
Become a member and get unlimited access to the entire skills library of over 4,971 courses, including more Web and personalized recommendations.Start Your Free Trial Now
- View Offline
- Understanding delay and fill-mode
- Dictating an animation's direction
- Using easing
- Adding keyframes
- Looping an animation
- Chaining multiple animations on one element
- Setting up the HTML structure
Skill Level Intermediate
Easing is one of those things that I don't think web designers talk about enough. It's only one aspect of any given animation, but the easing you choose has the power to greatly affect the way your animation comes across. So it's a really important factor. By definition, easing is the way speed is distributed across the duration of our animation. In CSS all easing is handled with the animation-timing-function property. We have three options for defining animation-timing functions, predefined keywords, our own cubic Bezier curves, and steps. While steps are certainly an option for this property, they have their own distinctive concept which doesn't involve easing at all.
We'll be talking about them later in their very own tutorial. There's still plenty of easing to talk about, though. Let's look at our pre-defined keyword options in more detail first to get a better picture of what's going on behind the scenes. Our pre-defined keywords are ease, which is the default, linear, ease-in, ease-out, and ease-in-out. These all sound a little repetitive, but they kind of build upon each other. So let's go back and refer to our simple ball animation and see how these different animation-timing-functions can affect the way the animation looks.
We'll go back to Coda and pull up the CSS for our ball animation. We're back on our simple move-right animation, which has two keyframes moving from a position on the left all the way over to positions slightly to the right, and we have our duration, iteration count, and fill modes already filled in for us. So let's add an animation-timing-function property. So let's start with the animation-timing-function of linear. We'll save the file and then preview our ball animation in our browser and see how that looks. Our ball moves across the screen rather slow, thanks to our 3-second duration, at a constant speed the entire time, and that's the way the linear keyword works.
It creates a constant speed of motion across the entire duration of the animation. This is often perceived as a very mechanical motion, because nothing in real life actually moves at a constant speed like that. Let's look at a couple other options to see if we can get something that looks maybe just a bit more organic. If we go back to Coda and then change our animation-timing-function to ease-in, let's save that and take a little preview. We'll refresh our browser window, and you can see that our animation starts out very slow and speeds up just a bit near the end.
It's still very long, it takes 3 seconds, but you can see a definite speeding up as we approach the end of the animation, and this is how ease-in works. It starts out a little slow, and then speeds up towards the end of the animation. It gives it a feel as if it's kind of taking its time, maybe moving a little bit slow or perhaps accelerating as it gets near to the end of the animation, and that definitely feels a little more organic than linear did. Let's go back to Coda and try ease-out and then preview that. You'll see we start out a little bit fast and then gradually slow down as we approach the end of our animation, and that's what ease-out looks like.
And you could see how this is also more organic than linear, similar to how ease-in was, and this ease-out might be something that's had some force applied to it so that's why it starts out fast and goes slow, maybe something that was pushed or maybe something that has weight to it and slows down as it approaches the end of its movement, because it has mass, and that's slowing it down. Let's go back to Coda and look at our ease-in-out. Ease-in-out as you might have guessed combines the look of ease-in and ease-out. So if we go back to our browser and refresh this to see it again, we start out slow, go fastest in the middle, and then slow down again at the end.
So again, it's very organic looking, and we have this kind of slowing and starting. That is something we see more in the real world, because we have things like gravity to deal with. One last one to check out if we go back to Coda, let's look at our ease keyword, which if you remember is actually the default animation-timing-function. So, if you didn't set any animation- timing-function at all, you will get ease. And if we go back to our browser and preview this, we'll notice it looks quite similar to the ease-in-out, starts a bit slow, speeds up the most in the middle and then slows down drastically at the end.
I find that the keyword of ease has a more dramatic slowing down at the ends, than the keyword of ease-in-out, but you can see they look pretty similar. Personally, I prefer the ease-in-out because of the more balanced motion. But if you prefer the look of ease, you can use that too. The next animation-timing-function option on our list is cubic Bezier curves. These can seem quite complicated at first if you've ever seen them in other people's CSS, because the math behind them is kind of complicated. They really can look like a big string of random numbers without much meaning behind them, but we've already been looking at them.
Each of the keywords options can also be defined as a cubic Bezier curve. The keywords are a bit like a shortcut to commonly used Bezier curves. If you want more control than what's offered by the keywords, you can create your own curve. So let's go to cubic-bezier.com to take a look at what these graphs look like. When you first get here, it's going to load a random curve for you. I set up one that happens to have the linear curve first, so let's take a look at that. If you remember, our animation with the animation-timing- function of linear had a constant speed, and a constant rate of speed across the entire animation, and this graph here on the left shows one straight line going up across the whole graph.
And this graph represents the constant speed of that linear animation. If we were to look at one that was a little bit more complicated or a little bit more interesting, for example, the ease-in-out, which you can get to by right-clicking and opening in a new tab on this ease-in-out button. Now, you can see our graph looks a lot different. It's got some steep parts and some less steep parts. And the main thing to remember with this cubic Bezier graphs is the steeper the curve is the faster the rate of motion, and the less steep it is the slower it is. So if you follow the time line on this graph, you'll notice it starts at a little bit less steep, which is that kind of slow motion at the beginning of our ease-in-out and in the middle of our ease-in-out animation, our animation will be the fastest and have the most speed, and then as it gets less steep again at the end, we see some slowing down.
Here in this middle area, we have our ease-in-out graph in pink plotted against our regular ease keyword graph here. And if we hit GO, we can see them kind of race each other. You will notice they both start and finish at the exact same time. But the way they get there and the way their speed changes across the animation is different. And that's why we'd be interested in using different types of easing. As you choose different graphs, or even maybe adjust the graphs yourself on cubic-bezier.com, you start to see that small adjustments in the shape of the curve will influence the nuances of our animation.
You should take a few minutes to play around, change these handles and then kind of preview what you've created. Your graph will always be this top one, and you can see it compared against the regular ease keyword just to see how things are changing. CSS allows us to define our own cubic Bezier curves, which make the easing possibilities available to us nearly endless. Cease is another tool that let's you define and preview custom cubic Bezier curves. One additional thing that this tool offers over cubic-bezier.com is the ports of the pan or easing equations to CSS, and you can see those here in this drop down list of presets.
These offer more refined versions of the basic ease-in, ease-in-out, and ease-out, easing paradigms that are usually only available in tweening engines. But with Cease, we can use this in CSS, too, and that's pretty cool. For both cubic-bezier.com and Cease, once you've got a curve preview that you like, you can copy and paste the cubic Bezier definition and use it in your own CSS. Personally, I think that the ease-in-out back looks pretty cool. That's a pretty fun curve. We'll preview it here, yeah, that's definitely something I like. So I can go down here where the code is displayed and grab our cubic Bezier function, copy and paste that, go back to Coda, and then add this in the animation-timing-function property.
So, now we can go back to our browser and preview our ball animation once again, and we've got this little bit of an elastic bounce to it, much slower than it was on Cease, because our duration is quite long. But you can see how you can use these tools to create these curves and preview them and then use them in your own work later. Now that we've taken this more in-depth look at our easing options in CSS, you'll be able to fine tune your animations with easing choices that will let you get the exact motion and feel that you're going for. For example, if you're working on something that's very heavy and may have a lot of mass and therefore has a lot of gravity acting on it, you might want to work with some variation of ease-out, and depending on the cubic Bezier variation of ease-out you pick, you can show how much heavier or how much weight that object has.
If you're working on something that can accelerate, for example, a car that the gas pedal is being pushed down harder or something going downhill, some variation of ease-in might work, where it starts out slow and then ends up faster near the end of the motion. And the variations of ease-in or the cubic Bezier versions of ease-in you'd pick there can show how much faster or how much steeper the hill is that it's going down or how much more it's accelerating. So there are a whole lot of options for you to work with and lots you can save with just easing.