There are currently two proposed additions to CSS to make animating easier and with better performance: CSS Transitions and CSS Animations. Both are unfortunately named. The later is complicated, overkill, and probably won’t be supported by non-Webkit browsers, which leaves CSS Transitions as becoming the de-facto way to natively animate on the Web. Besides reducing power-hungry Javascript-based animation, the declarative CSS Transitions opens the door for hardware acceleration and commercial quality games. iOS devices and Safari already do so for buttery smooth results, and hardware acceleration just might make it into Firefox 4.

How Do CSS Transitions Work?

Normally, when you change the value of a CSS property, it changes instantly. With CSS Transitions, they automagically animate over time. Imagine you want to have a rollover indication for links where, on hover, the link changes its background color and jigs up a bit. With CSS Transitions instead of having the effect happen instantly, it can smoothly animated. Here’s how you’d do it.

a{
  transition-property: all;
  transition-duration: 350ms;
  transition-timing-function: ease-in-out;
  position: relative;
  background-color: white;
  color: black;
}

a:hover{
  top: -2px
  background-color: black;
  color: white;
}

You can even add an event listener to detect when the transition has finished:

aLink.addEventListener("transitionend", function(){
  console.log("Transition Done!");
}, true);

Timing functions are defined by the control points for a cubic bezier curve of the form cubic-bezier(x1,y1,x2,y2). You can see some of the named timing functions and their values below. You can also define your own timing functions:

/* A more pronounced ease-in-out timing function. */
transition-timing-function: cubic-bezier(0.6, 0, 0.4, 1.0);

/* A timing function which causes a little bounce.
   Note that values above 1 only work in Firefox. */
transition-timing-function: cubic-bezier(0, 0.35, .5, 1.3);

Using CSS Transitions with jQuery

To use CSS Transitions in practice, you’ll want some helper functions to handle setting and and unsetting the transition properties, handling completion callback, and stopping animations. Towards that end, I’ve written a quick jQuery plugin that allows you to do just that (as well as deals with an annoying Firefox bug.)

Using it is simple:

// Makes all paragraph elements grow a border and then atrophy away.
$("p").animateWithCSS(
  {border: "5px solid #555"}, // CSS properties to animate
  1000,                       // Duration in ms
  "cubic-bezier",             // The timing function
  function(){                 // Callback
    $("p").animateWithCSS({border: "0px"}, 350);
  }
);

Get the CSS Transitions jQuery Plugin.

Demo

Get the CSS Transitions jQuery Plugin.

Problems with CSS Transitions

Better timing functions. While using a cubic bezier curve is clever—it packs a lot of variation into just four numbers—it isn’t enough. While I was able to create a basic bounce animation, not only does the spec explicitly disallow it, but I can’t control even the basic parameters of the bounce (like how fast it returns). As John Resig mentioned in a blog post, it would be nice to supply a custom Javascript timing function (although this might break the ability to do hardware acceleration). A more CSS-like solution might be to allow authors to provide an arbitrary number of control points for a series of linked quadratic or cubic bezier curves (and to not restrict the y-axis points to the 0 to 1 range). That would enable fine-grained control of timing without requiring Javascript.

Ability to layer two animations on top of each other. If I’ve started an animation moving an element to the left, and half-way through want to start animating its opacity at a different rate, things get complicated very quickly. And by complicated, I mean impossible.

Ability to register an on step handler. We can currently register a “transitionend” event handler. I’d like to be able to do the same for “transitionstep”. This would make CSS Transitions potentially much more versatile—and allow frameworks to keep innovating on top of the transitions base instead of reverting to pure Javascript animation.

RT @aza Animation with CSS Transitions Made Easy | Follow @aza on Twitter | All blog posts