CSS3 animation and transition not smooth

Question

I'm trying to develop a slideshow plugin for a project, but I'm running into issues with the CSS3 animations/transitions.

You can view it here: http://jsfiddle.net/75Sjb/

What I'm trying to do

• Each slide has both transform: translate3d(-100%,0,0) and transition: all. This way, slides that aren't active are just outside of the view, to the left, and are ready to be moved around smoothly.

• The active slide also has an animation whose from portion says transform: translate3d(100%,0,0), as well as a new transform property in their CSS as translate3d(0,0,0). So they animate from just right to being snug in the view.

The problem

In Webkit

Although the first time picking a slide is animated properly, every other one after that is botched. The slide going from active to inactive doesn't animate out.

In Firefox

In Firefox, the slide going from active to inactive is fine; but the active slide slide in from left (the animation isn't working).

Answer 1

Perhaps this was an issue with older versions of the browsers, but the animation is working fine now.