I just discovered CSS3 Animation and I am quickly becoming obsessed.

CSS3 makes DOM animations really easy. I can move things around, shrink or enlarge text and images, make buttons and links “pop” on hover, and help the user focus on the most relevant information. This can all be done through CSS3.

DISCLAIMER: Contrary to the title of this article, I am less of a Picasso and more of a dog making “art” all over your brand new rug.

Animation

Do you see that ball up there? If you can’t, go check out the jsfiddle. The concepts are so simple an embedded programmer could do it. Let’s look at the animation- tags on the ball first:

1
2
3
4
5
6

.ball {
  /* ... */
  animation-duration: 10s;
  animation-name: rollout;
  animation-iteration-count: infinite;
}

• animation-duration
  • The length of time the animation will take to complete.
  • Example: 10s
• animation-name
  • A unique name for the animation we want to use. If you write good animations, you might be able to reuse them later.
  • Example: rollout
• animation-iteration-count
  • The number of times the animation should run. Default 1.
  • Example: infinite

Note that there are several other animation- attributes to give you more control, but we only need a few in this case. For a more in-depth look at these attributes and their constituents, I advise you to check out this MDN article. Also, note that at this point Google’s Chrome browser still requires -webkit- prefixes on animation objects. Hopefully they join the rest of the modern world soon.

The animation- attributes let us configure our usage of an animation, but the real guts of the animation come from the definition inside a @keyframes tag.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

.ball { /* ... */ }

@keyframes rollout {
  25% {
    margin-left: 47%;
  }
  50% {
    margin-left: 94%;
  }
  75% {
    margin-left: 47%;
  }
  100% {
    margin-left: 0%;
  }
}

Note the name rollout is the same as the animation-name attribute we set on .ball previously. This is the definition of our animation at different timeframes. What this says:

1. 25% of the way through the animation, the object should have margin-left of 47%, putting it in the middle of the page.
2. 50% of the way through the animation, the object should have margin-left of 94%, putting it at the far right of the page.
3. 75% of the way through the animation, the object should have margin-left of 47%, putting it in the middle of the page again.
4. 100% of the way through the animation, the object should have margin-left of 0%, putting it back where it started.

This is easy and relatively readable. I can see exactly what is supposed to be going on and when.

Transition

Although the animation- attributes give you a lot of control over animations, there are several other tools available. CSS Transitions are animations that are performed between two distinct states. This is especially helpful when you want to run an animation after some event happens. When I click this button, I add a class to my ball to make it move to the right. I click it again and the ball moves to the left. You can see the fiddle below or view it on jsfiddle.

The important CSS here is transition and the margin-left:

1
2
3
4
5
6
7
8
9
10

.ball {
  /* ... */

  transition: margin-left 3s;
  margin-left: 0%;
}

.rollout {
  margin-left: 94%;
}

When my DOM object has the ball class, a transition will begin to set the margin-left to 0% over a period of 3 seconds. When the rollout class is applied, a transition begins which brings the margin-left to 94% over another 3 seconds. The transition knows to apply the given CSS attribute as found in the last-applicable style definition.

Transitions are really great for single page applications - as I switch contexts in my application, I move my DOM elements around or I gradually hide them from view. When I get time to release my next homemade application, expect to see lots of little animations. Probably way more animations than necessary - just bear with me.

There are many other CSS animation topics, but I don’t quite have the experience to elaborate. Transforms give you really easy ways to rotate, skew, and translate objects, even allowing for the creation of 3-dimensional CSS objects. The to and from shorthand in @keyframes elements can make reading animations even easier. I may be a little late to the party, but the world created by CSS3 and HTML5 is a much better one for programmers and (hopefully) for end-users.