Have questions? Discuss this HTML5 / CSS3 tutorial with others on the forums.
Quick recap. When you are animating something via CSS Animations or Transitions, a property or multiple properties change over a period of time. It is the visualization of this change that creates an animation.
In CSS3, by default, the property values change with a slight ease as they go from their start value to their end value:
To put that chart into something more real, below is an example involving a friendly blue circle sliding from left to right:
The silhouettes of the circle are basically snapshots taken as it was moving right. Notice that the blue circle starts moving slowly, then it speeds up, and then it slows down as it reaches the end again. Pretty cool, right?
Fortunately, you don't have to write a lot of complex math or code to make this all work. To make your animations interesting, you have what are known as easing functions, and in this tutorial you will learn how you can easily use them to kick the awesomeness of your animations and transitions up a few notches.
What is an Easing Function?
Before going further, let's first learn learn what exactly is an easing function. Let's say you have a property, and let's call this property left. (Hi left!!!) This left property defines the horizontal position of a blue element of a rare circular kind:
What you want to do is shift this element right by a few hundred pixels, and you want it done over a period of 1 second:
Notice that our left property's value at the beginning is 50 pixels, and its value at the end of our animation is 350 pixels.
For our circle to go from a left value of 50 to a left value of 350, you need to generate intermediate values for our left property so that it makes it smoothly to the edge in exactly 1 second:
Imagine each vertical slice as an intermediary point our circle hits as its left property changes from 50 pixels to 350 pixels:
Right now, our intermediary points are evenly spaced out. What would happen if you adjusted your intermediary points a bit where you have a lot of points at the beginning but fewer as you get towards the end?
Here is what one variation of that would look like:
Notice that the end result is the same. Your circle's left property hits 350 pixels, and it does so in one second. What isn't the same is what happens in the middle. Instead of the intermediary points being evenly spaced apart, they are arranged in a way to make the circle gradually accelerate as the left property barrels from 50 pixels to 350 pixels. Arrange the intermediary points in a different way, and your circle will reach its destination with different things happening during the journey.
Do you know what helps calculate these intermediary points? The answer is...an easing function. An easing function is a mathematical formula that defines the rate at which your properties change. This formula can help your rate to be constant (boring!), or it can ensure your rate is something nonlinear with accelerations, decelerations, and all other kinds of celerations you haven't even heard of!
Ok, now that you have an idea of what an easing function is and what role it plays in your animations, let's actually use one.
Adding Some Easing
First, I'm going to give you some markup that creates a simple animation of, you guessed it, a circle moving from left to right. Create a new HTML document and copy/paste the following HTML and CSS into it:
- <!DOCTYPE html>
- <html lang="en-us">
- <head>
- <meta charset="utf-8">
- <title>Easing Example</title>
- <style>
- h1 {
- font-family: Cambria, serif;
- font-size: xx-large;
- color: #0C4D6B;
- }
- #mainContent {
- font-family: Arial, Helvetica, sans-serif;
- font-size: xx-large;
- font-weight: bold;
- background-color: #F9F9F9;
- border-radius: 4px;
- padding: 10px;
- width: 350px;
- height: 200px;
- overflow: hidden;
- }
- #myImage {
- -moz-animation-name: imageSlide;
- -moz-animation-duration: 3s;
- -moz-animation-iteration-count: infinite;
- -webkit-animation-name: imageSlide;
- -webkit-animation-duration: 3s;
- -webkit-animation-iteration-count: infinite;
- -ms-animation-name: imageSlide;
- -ms-animation-duration: 3s;
- -ms-animation-iteration-count: infinite;
- animation-name: imageSlide;
- animation-duration: 3s;
- animation-iteration-count: infinite;
- position: relative;
- padding-top: 70px;
- }
- @-moz-keyframes imageSlide {
- 0% {
- left: -150px;
- }
- 100% {
- left: 600px;
- }
- }
- @-webkit-keyframes imageSlide {
- 0% {
- left: -150px;
- }
- 100% {
- left: 600px;
- }
- }
- @-ms-keyframes imageSlide {
- 0% {
- left: -150px;
- }
- 100% {
- left: 600px;
- }
- }
- </style>
- </head>
- <body>
- <h1>Easing Example</h1>
- <div id="mainContent">
- <img id="myImage" alt="circle that will be animated" src="images/bluecircle.png"></div>
- </body>
- </html>
If you save this HTML file and preview it in your browser, you will see something that looks as follows with a blue circle moving from left to right:
[ click here for the live version ]
What I've done here is declare a simple animation with a starting keyframe and ending keyframe that tells our circle's left property to slide across the div. That's pretty much it. If you need a thorought walkthrough into what exactly happened, please refer to the Creating a Simple CSS Animation tutorial that dissects every aspect of an animation that is very similar to this one.
Adding Some Easing
All right! Its time to add an easing function to our animation. The CSS properties that define the easing function used is called transition-timing-function for CSS3 Transitions and animation-timing-function for CSS3 Animations.
Our example is an animation, so we will be using the latter, animation-timing-function. Right now, the CSS that defines our animation doesn't even have a timing function defined:
- -moz-animation-name: imageSlide;
- -moz-animation-duration: 3s;
- -moz-animation-iteration-count: infinite;
- -webkit-animation-name: imageSlide;
- -webkit-animation-duration: 3s;
- -webkit-animation-iteration-count: infinite;
- -ms-animation-name: imageSlide;
- -ms-animation-duration: 3s;
- -ms-animation-iteration-count: infinite;
- animation-name: imageSlide;
- animation-duration: 3s;
- animation-iteration-count: infinite;
All our animation currently specifies is the name (used for mapping the keyframes to the animation), the duration, and the iteration count. So, let's change that by defining an animation-timing-function set to an easing function of ease-in-out:
- -moz-animation-name: imageSlide;
- -moz-animation-duration: 3s;
- -moz-animation-iteration-count: infinite;
- -moz-animation-timing-function: ease-in-out;
- -webkit-animation-name: imageSlide;
- -webkit-animation-duration: 3s;
- -webkit-animation-iteration-count: infinite;
- -webkit-animation-timing-function: ease-in-out;
- -ms-animation-name: imageSlide;
- -ms-animation-duration: 3s;
- -ms-animation-iteration-count: infinite;
- -ms-animation-timing-function: ease-in-out;
- animation-name: imageSlide;
- animation-duration: 3s;
- animation-iteration-count: infinite;
- animation-timing-function: ease-in-out;
Note
The reason for all of that duplicated markup is because the animation-related details haven't officially been signed off by the W3C yet. Until the discrepancies are ironed out, each browser vendor requires his/her/it's own copy of the animation properties with the appropriate vendor prefix.
If you preview your example now, you will see the easing applied where your circle slowly speeds up and then slows down as it reaches the end. Me verbally describing it does not do this effect justice, so do try it out for yourself or see my example.
Meet the Easing Functions
I mentioned earlier that using easing functions is really simple. You've met the ease easing function at the intro, and you used the ease-in-out easing function in the previous section.
There are a few more easing functions you can use, and the full list of easing functions you can use are:
- ease
- linear
- ease-in
- ease-out
- ease-in-out
- cubic-bezier
Try each of these easing functions out to see how they alter your animation.
One thing to keep in mind is that cubic-bezier takes an argument of four numbers - for example: cubic-bezier(0.42, 0, 0.58, 1.0). Don't worry right now if you don't know how all four of those numbers correlate to define a custom ease, for I'll devote an entire tutorial in the future to explain how they work.
Transitions and Easing
Ok, last topic. In the previous section, you saw how you can specify an easing function for animations. I only briefly mentioned transitions when I introduced the timing functions, but there is very little different outside of a keyword or two between transitions and animations.
The only difference, to reiterate, is that your timing function for a transition is called transition-timing-function. Beyond that, the exact same number of easing functions is available for you to use. The Looking at CSS3 Transitions tutorial has an ease defined, so you can refer to that tutorial for an example of how it would work.
Conclusion
Easing functions are one of those subtle things added to the platform that make animations and transitions viable for creating a more believable visualization of change. There is still a ways to go, but at least the arrows are all pointing in the right direction.
If you are a glass is half-empty kind of a person, like I am when it comes to anything HTML5 given the overflowing glass that is Flash, you may be wondering why there really aren't that many easing functions built-in to the platform. I mean, only 5 (6 if you count cubic-bezier)? That seems like a shortcoming.
Fortunately, to help address this, you have a great set of libraries by Joe Lambert called Morf. Morf allows you to go beyond the built-in easing functions and use JavaScript to provide you with more easing functions. The nice thing about Joe's approach is that you get more easing functions without losing the hardware acceleration and performance benefits of using the native CSS3 transitions.
Need Help?
If you have questions, need some assistance on this topic, or just want to
chat - please drop by our friendly forums
and post your question. There are a lot of knowledgeable and witty people who
would be happy to help you out. Plus, we have a
large collection of smileys
you can use
Share
Did you enjoy reading this and found it useful? If so, please share it with your friends:
If you didn't like it, I always like to hear how I can do better next time. Please feel free to contact me directly at kirupa[at]kirupa.com.
Cheers!
|
