How to start different elements on different keyframes of an animation in CSS

Question

If I have a CSS animation and I want to create various instances of that animation but start at different stages of the animation how can I specify that.

I imagined something like this, second webkit line is pseudo code:

 #cell1
  {
      width:100px;
      height:100px;

       -webkit-animation: pulse 35s infinite alternate;
       -webkit-animation: pulse start at 25%;
  }

Answer 1

As I understand the spec, a negative value for animation-delay would do the trick:

http://www.w3.org/TR/css3-animations/#animation-delay

If the value for 'animation-delay' is a negative time offset then the animation will execute the moment it is applied, but will appear to have begun execution at the specified offset. That is, the animation will appear to begin part-way through its play cycle. In the case where an animation has implied starting values and a negative 'animation-delay', the starting values are taken from the moment the animation is applied.

EDIT: Indeed, this works with my chromium: http://jsfiddle.net/GvUzX/