CSS transforms spaced out with setTimeout firefox crash

Question

i am trying to put together a "page turning" animation using CSS transforms. I've got a long stripe (div) that runs vertically on the page. When I want the close a page so it's not visible, I add the stripe_animation_closed style (and remove the open style). When I want to open a page, I add the stripe_animation_exec_left_open style (and remove the close style). My DIV that I'm turning has a UL with some LI elements that contain text.

What happens is that sometimes FireFox just crashes whenever one of the animations is happening. I can't figure out for the life of me what's happening. I googled this one and saw some Firefox bugs regarding fonts being bad, but I'm using Arial which they suggested.

What's strange too is that I have a setTimeout of 2 seconds between hiding a page and opening a new one. If I just forget the timeout and add/remove all the styles together, the crash doesn't seem to happen. It doesn't animate either.

Code that does the style switch

$(".stripe_4 .fSort li").on("click", function() {
    if( $(".stripe_3").hasClass("stripe_animation_exec_left_open") ){
        $(".stripe_3").removeClass("stripe_animation_exec_left_open");
        $(".stripe_3").addClass("stripe_animation_closed");

        setTimeout( function(){
            $(".stripe_3").addClass("stripe_animation_closed");
            $(".stripe_3").addClass("stripe_animation_exec_left_open");
        }, 2000 );

    } else {
        $(".stripe_3").addClass("stripe_animation_closed");
        $(".stripe_3").addClass("stripe_animation_exec_left_open");
    }

    $(".stripe_4 .fSelected").removeClass("fSelected");
    $(this).addClass("fSelected");

    //attemptJoin();
});

Style for closing a page

.stripe_animation_closed {
   -webkit-transition: all 1s ease-in-out; 
   -moz-transition: all 1s ease-in-out; 
   -o-transition: all 1s ease-in-out; 
   transition: all 1s ease-in-out;

   -webkit-transform: rotateY(90deg) ;/*scale(0.97, 0.97);*/
   -moz-transform: rotateY(90deg) ;/*scale(0.97, 0.97);*/
   -o-transform: rotateY(90deg) ;/*scale(0.97, 0.97);*/
   -ms-transform: rotateY(90deg) ;/*scale(0.97, 0.97);*/
   transform: rotateY(90deg) ;/*scale(0.97, 0.97);*/

   /*transform-origin: 0%;*/
   opacity:0.1;

}

Style for opening a page

.stripe_animation_exec_left_open {
    -webkit-transition: all 1s ease-in-out; 
    -moz-transition: all 1s ease-in-out; 
    -o-transition: all 1s ease-in-out; 
    transition: all 1s ease-in-out;

   -webkit-transform: rotateY(0deg); /*scale(1, 1);*/
   -moz-transform: rotateY(0deg); /*scale(1, 1);*/
   -ms-transform: rotateY(0deg); /*scale(1, 1);*/
   -o-transform: rotateY(0deg); /*scale(1, 1);*/
   transform: rotateY(0deg); /*scale(1, 1);*/

   /*transform-origin: 0%;*/
   opacity: 1;
}

Answer 1

It might be a performance related issue. I would really reduce the amount of calculation for painting the browser has to do. For instance your specifying transition:all ... where you only need transition: transform ....

This should reduce the amount of work done by a lot. Try this and see if it helps in your situation.

Also if you want, you can try to use css animations instead of transitions. Animations have javascript event handlers and you can better detect the time your animation actually ends.

EXMAPLE ON CSS ANIMATION WITH JS EVENTS

http://www.sitepoint.com/css3-animation-javascript-event-handlers/