css3 animation - fading

I'm playi开发者_开发问答ng with css3 animation / transition and I've noticed small issue in my project.

Source: http://jsfiddle.net/paranoida/cuwgQ/

Fullscreen version: http://jsfiddle.net/paranoida/cuwgQ/show

Requirement: Safari / Chrome

---

I want to create smooth fade between two slides. I used webkitAnimationEnd event to create callbacks.

Animation duration slides is set to 5s.

Thumbs (progress bar) have their own duration (1s shorter then slides) = 4s.

I added "current" class to next element if progress bar animation is completed. After that I removed "current" class from previous element if slide animation is completed. And so on...

It works fine between slide 1 and 2, 3 and 4, 5 and 6, etc. I dont know why js has problem with slides 2 and 3, 4 and 5 ;/ Maybe it's problem with synchronization but I am not 100% sure.

My concept:

1. [0s] start animation (first element has "current" class)
2. [4s] - next slide has "current" class
3. [5s] - remove "current" class from first slide
4. [9s] - next slide has "current" class
5. [10s] - remove "current" class from second slide
6. ...

It works fine in theory and for other class than "current".

Example: _http://jsfiddle.net/paranoida/cuwgQ/18/show/ (You need to use webinspector or firebug)

Any idea?

---

You can use the animation-delay property to sync your animations rather than using javascript. It might be much smoother. Here is something I wrote that demos this: http://nimbu.in/unplugged/demos/slideshow.html

(also animations work in FF5 beta now).