I’ve been working on my CSS3 music video session for CSS Dev Conference, and I’ve found it handy to write this little guide to the main distinguishing points of CSS3 transitions, transformations and keyframe animations. They’re all very similar but startlingly different. Some are more suited to certain applications than others, as you shall soon see.

(If you want to get right to the demo page animation, here you go. And yes, there’s more to it than that. Click some stuff!)

"I could do that with jQuery."

When I first got started in web design back in 2008, if you wanted to make something move, you had to turn to jQuery’s animate() function or install a special JS library. My initial aspiration as soon as I started learning JavaScript was to animate a music video. I made several weak attempts before giving up on the idea, including an animated parallax of Hueco Mundo, a setting from the Bleach manga. It should have been easy. How many anime openings have you watched and thought to yourself, “I could do that with jQuery?” (If you don’t watch much anime, the correct answer is most of them.)

But animating with JS is clunky to implement and more memory intensive. I could recreate my Hueco Mundo example using just CSS with a fraction of the code and dependencies of the original. So when your boss asks for some “razzle dazzle,” before you reach for your trusty script tags, consider cracking open your stylesheet first.

Just a sweet Transition...

Use transitions when you want to change a CSS property with a little pizzaz, like fading a new color into a button when a user hovers over it.

Transitions are limited. You can only use them on CSS properties, and you can only use them with:

• The pseudo classes :hover, :active, :focus
• If you use JS to change CSS properties on the transitionable element, be it directly through the addition of inline styles to said element or indirectly through the addition of a class that changes its CSS through the cascade.

Transitions go on the element you want to animate like so:

.transitionable {
  color: red;
  transition: color 2s linear;
}

That syntax is basically transition: $property $time $easing;

You can use delays and chain transitions for some very nice effects. The curious can learn more about CSS transitions over at A List Apart.

To kick the transition off, just change the CSS property you set in the above. Like so:

.transitionable:hover, .js-added-class .transitionable {
  color: blue;
}

Gotchas

• You must explicitly declare the property you want to change in order to target it with a transition. If we didn't declare that .transitionable { color: red; ...} above, nothing would happen when you hover over it.
• Transitions can't be run on page load, though. CSS3 animation keyframes will help you there. But transitions need a kick off event to do something.
• Only works with certain properties.

Even Sweeter Transformations

CSS3 can transform an element on the page, rotating it, scaling it, doing something with it, whereas transitions just smooth what would otherwise be a jarring jump between CSS property values. Since transform is a CSS property, you can use transitions to apply transformations. Transformations can be 2D and 3D. I haven’t done much with 3D yet. (I kinda detest 3D animation with the exception of Coraline, which was a hybrid of stop-motion and 3D.)

You can translate, scale, rotate and translate (move) an element.

CSS transformations are special in that they need two properties to work:

1. transform (the transformation settings you wish to apply)
2. transform-origin (the location from which you want to orient those settings--should you fail to provide it, the default value is 50% 50% i.e. "center")

.transformable {
  transform: rotate(0deg);
  transform-origin: 30px bottom; // works just like positioning background images.
}

Transforming with CSS is handier than using SVG if only because you can set transform-origin: center, whereas with SVG, you’d have to calculate the element’s center and give its coordinates from the top left corner of the element. (Responsive? I think not.)

Gotchas

Transforms don’t effect the flow of a document. The original location is occupied, and elements “in the way of” the new location do not budge.

Animations & Keyframes

Animations are a lot like transitions except they don’t require a state change like a :hover to kick off. They can happen after a set amount of time, on page load, whatever really. While transitions only transition on set properties. Animations can do what they want with any kind of properties, whether or not you’ve declared them.

Animations can use both transitions and transforms inside their syntax. First you declare keyframes:

@keyframes spin {
  from { 
    transform: rotate(0deg); // A CSS transform!
    opacity: 1; // A property to transition!
  }
  to { 
    transform: rotate(360deg);
    opacity: 0;
  }
}

Then you attach them to a selector by name:

.spinner {
  animation-name: spin; // use the name of the keyframes you defined above
  animation-duration: 3s; // required or nothing happens
}

Or shorthanded with all the options:

animation: $name $easing $duration $iteration-count;

There’s an interesting option for $easing called steps. Steps give you a jumpy abrupt lack-of-transition, and their syntax is a little odd. But you can use them to replace animated gifs with sprites.

Animations are actually quite straightforward and DRY. You can define one once and use it many times. More of CSS should work like this, in my opinion. There are many wonderful things you can stuff inside keyframes and do with animations. I’d just be copying this article verbatim if I tried to explain it all here: dev.opera’s Making a Move with CSS3 Animations

Gotchas

• If you don't specify the duration, nothing happens.
• CSS3 animations work in pretty much everything but IE if you use prefixes.

In demonstration

I used all of the above to make a lovely interactive animation (psst, give the tassel a tug). Please enjoy the surprise, and have a poke at the code! I made all these notes while working on this piece. While these may be covered in the opening of my talk, I’ll actually be going into more detail about the HTML5 audio API than the minutiae of CSS3 easing options. There’s just so much to cover on timing and events!

Go out there and make something cool!