Our website will be down for scheduled maintenance on Thursday, September 18, at 11 p.m. Pacific Time and should be back up by Midnight. We apologize for any inconvenience.

Easy-to-follow video tutorials help you learn software, creative, and business skills.Become a member

Understanding easing

From: CSS: Animations

Video: Understanding easing

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.

Understanding easing

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.

Show transcript

This video is part of

Image for CSS: Animations
CSS: Animations

29 video lessons · 11748 viewers

Val Head
Author

 
Expand all | Collapse all
  1. 4m 47s
    1. Welcome
      41s
    2. What you should know before watching this course
      58s
    3. Vendor prefixes and browser support
      2m 11s
    4. Using the exercise files
      57s
  2. 28m 16s
    1. Animation basics
      6m 32s
    2. Exploring animation delay and the fill-mode property
      6m 6s
    3. Working with animation direction
      4m 49s
    4. Understanding easing
      8m 47s
    5. Challenge: Adding keyframes to our animation
      49s
    6. Solution: Adding keyframes to our animation
      1m 13s
  3. 47m 37s
    1. Creating a seamlessly looping animation
      6m 27s
    2. Animating an element into place
      5m 43s
    3. Playing and pausing an animation on hover
      6m 20s
    4. Animating 3D transforms
      8m 6s
    5. Preparing a sprite image for animation
      4m 55s
    6. Animating the sprite image with steps
      5m 34s
    7. Chaining multiple animations on one element
      8m 2s
    8. Challenge: Adding a third animation to the chain
      46s
    9. Solution: Adding a third animation to the chain
      1m 44s
  4. 19m 54s
    1. A preview of what we'll be creating
      1m 10s
    2. Setting up the HTML structure
      1m 48s
    3. Adding the header animation
      5m 57s
    4. Animating the data
      6m 8s
    5. Adding interactivity with JavaScript
      4m 51s
  5. 12m 44s
    1. Why and when to use CSS animations
      4m 50s
    2. Organizing animation code for semantics and fallbacks
      4m 51s
    3. Crafting effective animations
      3m 3s
  6. 3m 0s
    1. Helpful online tools for creating and building animations
      3m 0s
  7. 24s
    1. Next steps
      24s

Start learning today

Get unlimited access to all courses for just $25/month.

Become a member
Sometimes @lynda teaches me how to use a program and sometimes Lynda.com changes my life forever. @JosefShutter
@lynda lynda.com is an absolute life saver when it comes to learning todays software. Definitely recommend it! #higherlearning @Michael_Caraway
@lynda The best thing online! Your database of courses is great! To the mark and very helpful. Thanks! @ru22more
Got to create something yesterday I never thought I could do. #thanks @lynda @Ngventurella
I really do love @lynda as a learning platform. Never stop learning and developing, it’s probably our greatest gift as a species! @soundslikedavid
@lynda just subscribed to lynda.com all I can say its brilliant join now trust me @ButchSamurai
@lynda is an awesome resource. The membership is priceless if you take advantage of it. @diabetic_techie
One of the best decision I made this year. Buy a 1yr subscription to @lynda @cybercaptive
guys lynda.com (@lynda) is the best. So far I’ve learned Java, principles of OO programming, and now learning about MS project @lucasmitchell
Signed back up to @lynda dot com. I’ve missed it!! Proper geeking out right now! #timetolearn #geek @JayGodbold
Share a link to this course

What are exercise files?

Exercise files are the same files the author uses in the course. Save time by downloading the author's files instead of setting up your own files, and learn by following along with the instructor.

Can I take this course without the exercise files?

Yes! If you decide you would like the exercise files later, you can upgrade to a premium account any time.

Become a member Download sample files See plans and pricing

Please wait... please wait ...
Upgrade to get access to exercise files.

Exercise files video

How to use exercise files.

Learn by watching, listening, and doing, Exercise files are the same files the author uses in the course, so you can download them and follow along Premium memberships include access to all exercise files in the library.


Exercise files

Exercise files video

How to use exercise files.

For additional information on downloading and using exercise files, watch our instructional video or read the instructions in the FAQ.

This course includes free exercise files, so you can practice while you watch the course. To access all the exercise files in our library, become a Premium Member.

Are you sure you want to mark all the videos in this course as unwatched?

This will not affect your course history, your reports, or your certificates of completion for this course.


Mark all as unwatched Cancel

Congratulations

You have completed CSS: Animations.

Return to your organization's learning portal to continue training, or close this page.


OK
Become a member to add this course to a playlist

Join today and get unlimited access to the entire library of video courses—and create as many playlists as you like.

Get started

Already a member?

Become a member to like this course.

Join today and get unlimited access to the entire library of video courses.

Get started

Already a member?

Exercise files

Learn by watching, listening, and doing! Exercise files are the same files the author uses in the course, so you can download them and follow along. Exercise files are available with all Premium memberships. Learn more

Get started

Already a Premium member?

Exercise files video

How to use exercise files.

Ask a question

Thanks for contacting us.
You’ll hear from our Customer Service team within 24 hours.

Please enter the text shown below:

The classic layout automatically defaults to the latest Flash Player.

To choose a different player, hold the cursor over your name at the top right of any lynda.com page and choose Site preferencesfrom the dropdown menu.

Continue to classic layout Stay on new layout
Exercise files

Access exercise files from a button right under the course name.

Mark videos as unwatched

Remove icons showing you already watched videos if you want to start over.

Control your viewing experience

Make the video wide, narrow, full-screen, or pop the player out of the page into its own window.

Interactive transcripts

Click on text in the transcript to jump to that spot in the video. As the video plays, the relevant spot in the transcript will be highlighted.

Are you sure you want to delete this note?

No

Your file was successfully uploaded.

Thanks for signing up.

We’ll send you a confirmation email shortly.


Sign up and receive emails about lynda.com and our online training library:

Here’s our privacy policy with more details about how we handle your information.

Keep up with news, tips, and latest courses with emails from lynda.com.

Sign up and receive emails about lynda.com and our online training library:

Here’s our privacy policy with more details about how we handle your information.

   
submit Lightbox submit clicked
Terms and conditions of use

We've updated our terms and conditions (now called terms of service).Go
Review and accept our updated terms of service.