css transitions - CSS animations triggered by jquery.addClass won't work after loading page content with ajax.load -

i've searched everywhere , not had luck.

what i'm trying use css3 animation triggered using jquery addclass. works fine on page doesn't have content populated jquery ajax.load method, when use ajax.load animations don't work, despite addition of classes happening.

code:

  $.fn.animateajaxrequest = function() {        // variables       $contentholder = '#maincontent';        // bind click event       $(this).click(function(e) {            // stop click           e.preventdefault();            // , set variables           $destination = $(this).attr('href');           $articlebreak = 0;            // fade out old content           $($contentholder).fadeout(600, function() {                // show loader                // new data               $(this).load($destination+' '+$contentholder+' > *', function() {                    // hide loader                    // hide articles                   $('article.whitebox', this).removeclass('allin').addclass('out');                    // fade in                   $(this).fadein(600);                    // loop articles , load them in one-by-one                   $('article.whitebox', this).each(function() {                        // increment article break                       $articlebreak += 300;                        // fade article in                       $(this).delay($articlebreak).queue(function(next){                          $(this).removeclass('out').addclass('allin');                         next();                       });                    });               });           });        }); 

css:

article.whitebox {     &.out {         opacity: 0;     }     &.allout {       animation: whiteboxalloutanime 1s;       -webkit-animation: whiteboxalloutanime 1s;        animation-iteration-count: 1;       -webkit-animation-iteration-count: 1;        animation-fill-mode: forwards;       -webkit-animation-fill-mode: forwards;     }     &.allin {       animation: whiteboxallinanime 1.5s;       -webkit-animation: whiteboxallinanime 1.5s;        animation-iteration-count: 1;       -webkit-animation-iteration-count: 1;        animation-fill-mode: forwards;       -webkit-animation-fill-mode: forwards;     } } 

any ideas why received gratefully. when not using ajax.load fine , css3 animations work ok, with, plain doesn't work! in advance

thanks responses, i've sorted it, there duplicate line in 1 of mixins, taking time respond though.