CSS3 Animation Demystified

A Brief History of Time

Back in the 90′s and early 2000′s when the web was so shiny and new, designers experimented with animation quite a lot. I remember watching hundreds of Flash cartoons during that period, but I was always most impressed when animation was used for more functional purposes. The problem, of course, is that these made use of Adobe Flash. Sometimes there are good uses for Flash, but typically it’s bad for accessibility, mobile devices, and many other reasons.

As CSS3 support continues to pick up across all the major browsers, animation is starting to appear much more frequently. However, if you avoided Flash and any other form of

animation in the past, some of the concepts may be foreign to you. When I first learned about CSS3 timing functions for animations, it was more confusing than quantum mechanics (OK, maybe that’s hyperbole, but it definitely felt like I was learning how to warp time). In this post, I’ll attempt to demystify some of the more confusing parts of CSS3 animation. Get ready to free your mind and learn how to think about time as a flexible dimension.

Keyframes and the Animation Property

There are two broad concepts to understand first: animation keyframes and the animation property. When I was first learning, it helped me to understand keyframes first. Consider the following CSS:

@-webkit-keyframes fade { 0% { opacity: 1; } 100% { opacity: 0; } }

In this example, we’re using the @keyframes rule. For the sake of simplicity, we’re only using the -webkit- vendor prefix; in a production environment, you would need to duplicate these keyframes for cross-browser compatibility. Then, we’re creating a new animation called fade. Inside of our keyframe rule, we’re adding keyframes using the percentage values 0% and 100%. You can, of course, add any number of keyframes with any percentage values.

In this simple animation, we’re starting at 0% completion with the opacity property set to 1 (or, completely opaque). Then, we end the animation at 100% and set the same opacity property to 0 (completely transparent). This example simply uses the opacity property, but you can animate almost anything, particularly properties that use numeric values (think position, color, transforms, margin, padding, and so on).

Now that we’ve created a new animation, we’re ready to apply it to an element using the animation property. Consider the following CSS:

.myElement { -webkit-animation: fade 3s linear infinite; }

In this code block, we’ve selected an element and used the animation property (again, with the vendor prefix for webkit browsers). We’ve added the name of our keyframes, fade, to indicate which set of keyframes we’d like to use. This is useful on pages where there are lots of different sets of animations and keyframes. Next, we’ve set a duration of 3s (3 seconds) over a linear animation curve (more on this later). The animation will loop an infinite number of times. Here’s what it looks like:

Timing Functions

There are many other values that you can apply to the animation property. If you want to delve into the full details, I strongly recommend you read the W3C documentation for CSS animation. However, the most confusing value by far is the timing function and its relationship to the duration value and the applied keyframes. In the example above, we used a the built-in keyword linear, but we could have used keywords like ease-in, ease-out, or ease-in-out. Here’s what these timing functions look like as animation curves over time:

So for example, if we applied the ease-in-out timing function, the animation would start out slowly, speed up towards the middle, and then slow down at the end. In a sense, we’re altering the speed of animation playback. It’s important to note, however, that the timing function is completely separated from the duration. The duration adjusts how long the animation should run overall; it can speed up or slow down anywhere in between with timing functions and keyframes, but overall, the animation will still adhere to the duration regardless of timing functions. Put another way, the graphs above represent the relationship between the percentage completion in the animation, and time (which is a flexible scale that can be adjusted with the duration value). Here’s a graph with the axises labeled:

Even with all that explanation, I understand that this still might not make sense. If that’s the case for you, I suggest you check out the following example. For each box, I’ve applied a set of keyframes that will move the boxes from left to right. I’ve also added the alternate keyword to the animation property so that, after the animation completes, it will play in reverse. The only difference between each box is that they have a different timing function applied.

If you look at the box labeled linear, you’ll notice that it moves at the same speed for the entire (4 second) duration. The other boxes change their speeds, based on the timing function applied. However, all four boxes always start in the same time and place, and end in the same time and place. If they start out slow, they end fast to make up for it.

This post is meant to be a simple introduction to animation, so I don’t want to overcomplicate things with the cubic-bezier timing function or a more detailed of the bezier handle coordinates. However, if you would like to create your own timing functions, there’s this really great tool called the CSS3 Bezier Curve Tester. I suggest you take a peek and play with the settings on your own; experimentation is always the best explanation.

source blog teamtreehouse