Question

I am building a website in which a center div if pushed out of the screen when you click a button by another div that is positioned either to the left, top or right of the page.

The left, top and right divs will be loaded using jquery ajax and is animated using css3.

Here is the page I am talking about:

http://www.uvm.edu/~areid/homesite/index.html

Try clicking the left eye in Chrome and Firefox. You will see that the animation is smooth in Firefox but stutters in chrome.

Does anyone have any idea why this might be happening?

I was also wondering if anyone knew how I could potentially speed up the website/make the transitions look smoother.

thanks for any help you guys might have

best,

katie

Answer 1

I can clearly see the jerkiness in Chrome.

CSS3 animations do not necessarily run smoothly if you are doing lots of other things in the browser. How smoothly they run depends upon what else you’re trying to do at the same time and how the internal implementation in the browser handles that.

From my experience with a CSS3 slideshow that uses fancy CSS3 transitions, the best way to allow them to run smoothly is to NOT do substantial things with your code at the same time that you want the animation to be running smoothly. Here are some ways to maximize your chances of a smooth run:

1. Preload resources you may need during the time of the animation.
2. Don’t kick of any javascript functions during the run time of the animation.
3. Avoid loading images during the animation.
4. For things that you want to run after the animation, trigger their operation via the completion function of the animation (so they don’t start until the animation is done).
5. If you want something built and ready when the animation is done, then build it first before starting the animation and have it hidden and ready to go before you start the animation.
6. Don’t modify the DOM during your animation (other than what is required specifically for the animation).

More specifically in your page, I see jerkiness in the slide transition, but at the same time as it is sliding, I see the browser trying to load the new content that displays during the slide. It is likely that the loading and displaying of that new content is contributing to the jerkiness of the slide transition. I’d suggest that you either wait until the slide is done to start loading the new content or you preload the new content before starting the slide. I’ve found that some browsers get jerky in CSS3 transitions even when the browser is just loading images over the network.