CSS Animations and JavaScript


Apple, and the WebKit team, have recently proposed two different additions to CSS: CSS Transitions and CSS Animations.

The two specifications are confusingly named – and it’s hard to tell what the difference is between them at first glance. However, to put it simply: CSS Transitions are easy to use, while CSS Animations are made for programmers.

CSS Transitions

CSS Transitions provide you with the ability to force CSS property changing to occur smoothly over a period of time, rather than immediately and coarsely.

For example if you were to set elem.style.width = "500px";, and its current width was 100px then the element would, normally, jump up to 500px wide. With a CSS Transition it would smoothly move from 100px to 500px – the full CSS required would look something like this:

  1. #elem {
  2.   transition-property: width;
  3.   transition-duration: 1s;
  4. }

This would make it such that any manipulation of that element’s width would be done as a smooth transition. Note that no other properties are listed and, thus, are not affected. You can list as many properties as you wish, in a list: “width, heigh, opacity” (for example).

CSS Transitions complement the existing tools that we have for working with CSS from JavaScript. Any changes to a CSS property still work – they just happen much more smoothly.

Of course transitions can also be injected dynamically from JavaScript, like so:

  1. elem.style.transitionProperty = "width";
  2. elem.style.transitionDuration: "1000ms";

Since you can hook in these custom transitions it makes it possible to use them directly from JavaScript and within frameworks. Which leads to the question: Can the core of JavaScript animation frameworks be replaced with CSS Transitions, if they exist?

We had this discussion recently on the jQuery dev list and one user, Jonah, implemented a quick proof of concept to demonstrate how it CSS Transitions would work within jQuery. He also wrote up a stress test to see how it scaled.

Give the stress test a try in WebKit (or on the iPhone, if you have access to one) and you’ll definitely note an increase in animation smoothness – especially when a large number of animations are being run.

So why not just add in the CSS Transition code today?

There are a large number deal-breaking gotchas:

  1. You can’t stop an animation that’s already running.
  2. You get no feedback as to how the animation is running – only an event callback once it has completed.
  3. There’s no way to synchronize multiple animations.
  4. There’s no way to specify custom easing functions.

The inability to stop an animation is absolutely killer – and a huge requirement for any JavaScript framework that would be looking to adapt this as part of their code base.

That being said, the current transition code does have its place (namely within iPhone development) so I wouldn’t be surprised to see a solid jQuery plugin popup that iPhone devs start to use.

CSS Animations

CSS Animations are a second proposal from Apple/WebKit that embodies a much-more-complex way of doing animations. To give you an idea of the level of power that’s provided observe this quote from the proposal:

“Many aspects of the animation can be controlled, including how many times the animation iterates, whether or not it alternates between the begin and end values, and whether or not the animation should be running or paused. An animation can also delay its start time.”

The ability to pause animations is crucial – and immediately makes CSS Animations a more-viable candidate for use from JavaScript frameworks.

Here’s an example of how you would set up a CSS Animation, from the proposal:

  1. div {
  2.   animation-name: 'diagonal-slide';
  3.   animation-duration: 5s;
  4.   animation-iteration-count: 10;
  5. }
  6.  
  7. @keyframes 'diagonal-slide' {
  8.   from {
  9.     left: 0;
  10.     top: 0;
  11.   }
  12.   to {
  13.     left: 100px;
  14.     top: 100px;
  15.   }
  16. }

CSS Animations also provide a greater number of callbacks (letting you know when an animation has started, every step of the animation, and when it has ended) which can be important for doing animation synchronization.

Although the CSS Animation proposal has a number of things going against it:

  1. Its syntax and usability is far more confusing than that of the, relatively simple, CSS Transitions.
  2. It includes the concept of keyframes – while I’m sure this might be useful for someone I just can’t see a large enough benefit for such a large feature.

Honestly, at this point, I’d prefer to see CSS Transitions come around, but with a few additions:

  1. The ability to pause or stop transitions.
  2. Animation start, step, and end callbacks (along with information about how far along the animation is).
  3. The ability to provide a custom JavaScript function which would provide a custom easing function.

#1 and #2 are much more important here – but seeing both of those additions would help to make CSS Transitions actually a viable tool for web developers (not to mention that it would provide the best of both worlds – ease of use for non-framework-using developers and power and control for those using frameworks).

Posted: November 11th, 2008


If you particularly enjoy my work, I appreciate donations given with Gittip.

29 Comments (Show Comments)



Comments are closed.
Comments are automatically turned off two weeks after the original post. If you have a question concerning the content of this post, please feel free to contact me.


Secrets of the JavaScript Ninja

Secrets of the JS Ninja

Secret techniques of top JavaScript programmers. Published by Manning.

Ukiyo-e Database and Search

Ukiyo-e.org

Japanese woodblock print database and search engine.


John Resig Twitter Updates

@jeresig

Infrequent, short, updates and links.