Introduction to Animation in HTML

by kirupa   |   5 February 2013

While we think of animation as a recent creation brought about by film and computers, people have been fiddling with ways to communicate motion for a really REALLY long time:

first animation?

[ a sequence of pictures from 3000 BC (wikipedia) ]

Some of those ways ranged from cave paintings and elaborate mechanical devices to more contemporary solutions you can relate to such as what you see on television, computers, and smartphones. Today, almost everything you do on a device with a screen is just one click, tap, or keystroke away from springing to life:

examples of apps that have nice animation

No longer are animations something primarily in the domain of games, intros, cartoons, banner ads,...or cave paintings! Animations are so deeply ingrained, they make up a large part of your application’s overall user experience. They can make your applications easier to navigate. They help your content be more presentable. They can help your creations feel more alive and fun. Who doesn't want more of that?

That's enough background for now. You aren't here to get a history lesson or be convinced why animations are useful. You probably already know about their importance. What you want to know is how to actually implement animations, and you have come to the right place. Starting with this tutorial and subsequent ones, you will learn how to work with animations in HTML. In short time, you will become an animations expert...or at least good enough to play one on TV.

Onwards!

What Is An Animation?

Before we proceed further down the bright, lava-filled pit where you learn how to create animations, let's take a step back and figure out what an animation is. Let's start with a definition. At its most basic level, an animation is nothing more than a visualization of change - a change that occurs over a period of time.

Let's look at that in more detail.

The Start and End States

If visualizing change is an important part of an animation, we need to create some reference points so that we can compare what has changed. Let's call these reference points the start state and the end state. To better explain what is going on, let's come up with an easy-to-understand example as well.

Let's say our start state looks as follows:

the start

You start off with a dull gray smiley that is ironically quite cheerful. At the end state, your smiley now looks as follows:

smiley at the end state

 

Based just on the information you have on what our smiley looks like in the start and end states, what can you tell is different?

One change is the position. Our smiley starts off on the left side of the screen. It ends up on the right hand side. Another change is the color. Our smiley goes from being a dull gray to a cheerful yellow. The last change is the rotation. Our smiley is rotated clockwise by 90 degrees by the time it hits the end.

How do we make an animation out of this? If we were to just play the start and end states repeatedly, what you would see is something that just bounces from left to right repeatedly. That is pretty turrible. Just turrible. What we need is a way to smooth things out between the start and end states. What we need is a healthy dose of interpolation.

Interpolation

Right now, what we have are two discrete states in time. At the beginning, you have your start state. And the end, you have the end state. If you were to play this back, this wouldn't be an animation. In order to make an animation out of what we have, we need a smooth transition that creates all the intermediate states. This creation of the intermediate states is known as interpolation.

This interpolation, which occurs over a period of time that you specify, would look similar to the following diagram:

the interpolated values 

You may be wondering who specifies the interpolated states. The answer, which is probably good news, is that your browser or HTML rendering engine will take care of the messy details. All you need to specify is the starting state, the ending state, and the duration over which the transition between the two states needs to occur. Once you have those three things, you have an animation!

 You will later see how adding some other ingredients into the pot such as timing functions (easing functions) can alter how the interpolation works, but we'll get there later. For now, just revel in this simplified generalization of what makes up an animation, put on your best party clothes, and get ready to meet the three flavors of animation that you will end up using.

Animations in HTML

In HTML, there isn't just a single animation implementation (hey, that rhymes!) that you can use. You actually have three flavors of animation to choose from, and each one is specialized for certain kinds of tasks. Let's take a quick look at all three of them and see how they relate to the animation definition you saw in the previous section.

1. CSS Animations (aka Keyframe Animations)

CSS Animations are your traditional animations that on some sort of performance enhancing substance that makes them more awesome. With these kinds of animations, you can define not only the beginning and the end state but also any intermediate states lovingly known as keyframes:

animation keyframes

These intermediate states, if you choose to use them, allow you to have greater control over the thing you are animating. In the above example, the blue circle isn't simply sliding to the right and getting larger. The individual keyframes adjust the circle's size and vertical position in ways that you wouldn't see if you simply interpolated between the start and end states.

 Remember, even though you are specifying the intermediate states, your browser will still interpolate what it can between each state. Think of a keyframe animation as many little animations daisy chained together.

2. CSS Transitions

Transitions make up a class of animations where you only define the start state, end state, and duration. The rest such as interpolating between the two states is taken care of automatically for you:

transition

While transitions seem like a watered down, simplified keyframe animation, don't let that trick you. They are extremely powerful and probably my favorite animation technique to use in my projects. You'll see more about them shortly.

3. Scripted / JavaScript Animations

If you want full control over what your animation does right down to how it interpolates between two states, you can use JavaScript:

javascript animation

There are a lot of cool things you can do when you opt-out of the interpolation the browser does for you, and you'll get a good dose of that in the tutorials that look at JavaScript Animations in greater detail.

Next Steps

Ok, in this tutorial we covered a lot of ground. If your head is still spinning, don't worry - it will get better once we start expanding upon the basic concepts you have just seen. For now, take a short break and jump to any of the following tutorials to kick what you've learned up by a few notches:

Did You Like This?

Getting Help

If you have questions, need some assistance on this topic, or just want to chat - post in the comments below or drop by our friendly forums (where you have a lot more formatting options) and post your question. There are a lot of knowledgeable and witty people who would be happy to help you out

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!

Kirupa Chinnathambi

 

Add Your Comment (or post on the Forums)

add your comment

  

Read-only Archive of Old comments

Below is an archive of old comments made on this article. To create new comments click on the Start or Continue Discussion text above to add to this list.

blog comments powered by Disqus

Creating high-quality content is a team effort that takes a boatload of time. If you found what you see here helpful, please consider sending a small tip:

While tipping is entirely optional, we'll be your bestest friend forever if you do.

More Details & Options