CSS3 animations with transit not simultaneous in IE/FF

Question

I'm working on a presentation library to make my life a whole lot easier. Naturally animations are a pretty integral part of this.

The library uses Transit to power the animations for accelerated CSS3 goodness. One particular animation has an element either slide into or out of the presentation. If you stick two of these together (one going in, one going out), it creates a really nice effect for a slide to slide transition. See a demo here (use the arrow keys/click to go forwards/backwards through the presentation)

(This is all in Windows) Chrome displays the effect well, you cannot see a gap between the two "slides" during the transition because they are effectively being played at the same time. However, Chrome distorts text during transitions and there isn't much I can do about that so when actually presenting I'd like to use something like Firefox or even IE because they always anti-alias text nicely. However, in both FF and IE, a gap appears between the two slides as if they were started very slightly apart.

It's true that they were started apart, when I logged a Date.now() during the start of each animation, there was roughly a 4ms difference in Chrome and a 3ms difference in Firefox (though some of that overhead can be attributed to the creation of the Date object and there is still a lot of optimisation to go on this). Chrome has a bigger time difference yet Firefox is the one with the gap in the animation.

Is there any way to fix this? Is it a problem with my implementation (here on Github), or something to do with Transit (here on Github)? If there is no obvious solution I could try using Tram.js but I would like to avoid that at first because it is a bit more clunky than Transit.

Any insight into this will be appreciated. Sorry that there isn't any code on this page but it could be down to a number of things so I just have the whole library up for viewing.

Answer 1

Making a debug, I see that the ease function is set to

  easeInOutCubic: "cubic-bezier(.645,.045,.355,1)"

I would say that the problem arise from here, and that if you want the 2 animations to go in perfect sync, you should choose a linear easing function.