Friday, February 6th, 2009

CSS Animations in WebKit Nightly and iPhone

Category: CSS

Fire up WebKit nightly, or point your recently updated iPhone to check out this beautiful leaf animation all made possible with CSS Animation.

A simple bounce animation is shown to give you an idea of how it works:

  1. @-webkit-keyframes bounce {
  2.  from {
  3.    left: 0px;
  4.  }
  5.  to {
  6.    left: 200px;
  7.  }
  8. }

A @-webkit-keyframes block contains rule sets called keyframes. A keyframe defines the style that will be applied for that moment within the animation. The animation engine will smoothly interpolate style between the keyframes. In the above example we define an animation called “bounce” to have two keyframes: one for the start of the animation (the “from” block) and one for the end (the “to” block).

Once we have defined an animation, we apply it using -webkit-animation-name and related properties.

  1. div {
  2.  -webkit-animation-name: bounce;
  3.  -webkit-animation-duration: 4s;
  4.  -webkit-animation-iteration-count: 10;
  5.  -webkit-animation-direction: alternate;
  6. }

Hopefully we will see it in other browsers too:

We’re documenting these enhancements on and are proposing the specifications to standards bodies. Note that since they are currently features specific to WebKit they are implemented with a -webkit- prefix, although the specifications do not use the prefix.

Although, I am sure the SMIL folk could be a little miffed?

This is natural fodder for Ajax frameworks that handle animation now, to be able to use under the hood when available.

What do you think?

Posted by Dion Almaer at 1:23 am

3.9 rating from 21 votes


Comments feed TrackBack URI

i think effects like this should stay out of css. these kind of stuff will make css an effect language instead of being a design language

Comment by ariehg — February 6, 2009

wich language should be used for this? javascript is a really bad place, to define dynamic style changes. if you define the end-styles of your animation in your javascript, you don´t seperate the presentational layer from your the behaviour layer and this can make it really hard to “skin” your components.

this is why i´m a big fan of ClassTransitions

Comment by trixta — February 6, 2009

I think you’ve just answered your own question there, trixta – use CSS to handle presentation (layout, positioning and image, colours) and javascript to handle the transition and effects (in this example via jQuery).

Comment by daneastwell — February 6, 2009

I agree with daneastwell, I sometimes want to chain animation, do something after the animation, or while the animation.. This should stay in JS

Comment by karnius — February 6, 2009

Nice to have stuff that works with javascript off.

Comment by Nosredna — February 6, 2009

I also don’t think CSS should be used for animations. For one it over-complicates it, plus people are still going to end up using JS for animations because unless you make css into an actual programming language it will have limitations – so then you’ll start running into issues of JS animations interfering with CSS animations and vice versa.

Just leave CSS doing what it does best – layout, colors, images, etc. Leave the dynamic stuff to javascript.

Comment by iliad — February 6, 2009

You guys seem to misunderstood my point.
CSS animations are fully exposed to javascript. Javascript still can handle, when a css-animation starts, what to do after this (chaining), how fast the animation will be etc.

but the animation is morphing to a style property and this style property should be defined in a stylesheet.

Comment by trixta — February 6, 2009

Having animation directly in the browser will always be faster than using JS for every frame. With CSS animation, JS could just handle keyframes.

Comment by sroussey — February 6, 2009

If you dig through the apple docs there is a video where they show how this page was created and also show it side by side with a page that uses javascript for the same animation. The css animation is much much smoother.
For me though the big appeal of css animations (on the iphone at least) is the 3D capabilities. Not massively useful but pretty fun to play around with.

Comment by bighill — February 9, 2009

Leave a comment

You must be logged in to post a comment.