javascript - CSS3 transition fails to animate when inside setInterval -

i'll start off saying have gotten work using jquery .animate, i'd increase performance , try using css3 transitions.

when added "transition: opacity 0.6s;" label , used jquery change css value, words generating fade animation disappeared. original jquery method looked this:

start 4 animations opacity:0 loop generates 4 new words inside settimeout start 4 animations opacity:1 

the thing found odd animations started working after commented out settimeout , setinterval. having either of these in there made stop working. strikes me odd, because use here unrelated (afaik). googled around , have seen people mentioning these functions in relation css3 transitions, have been unable find explains going on here.

function printwords() {     var words = ["list","of","random","words"];      var selectors = ['div#northslogan', 'div#eastslogan', 'div#southslogan', 'div#westslogan'];      /* populate array numbers 0 through # of elements in 'words' array */     var nums = [];     (var i=0; < words.length; i++) {nums[i] = i;}      /* fade out slogan divs */     for(var i=0; < 4; i++) {         //$(selectors[i]).animate({opacity:0}, 600);         $(selectors[i]).css({opacity: 0});     }      /* generate random index , fill slogan div chosen text */     //settimeout(function() {         (var i=0; < 4; ++i) {             var index = math.floor(math.random()*nums.length);             document.queryselector(selectors[i]).innerhtml = words[nums[index]];             nums.splice(index, 1);         }     //}, 600);      /* fade in slogan divs */     for(var i=0; < 4; i++) {         //$(selectors[i]).animate({opacity:0.5}, 600);         $(selectors[i]).css({opacity: 1});     } }  printwords(); setinterval(printwords, 5000); 

so question is, setinterval , settimeout functions interfering these transitions? i'm doing possible, or going in wrong way?

ps: had settimeout function there word generation happen after animate opacity:0 had occurred, else see change happen before fade had begun. because starting 4 animations @ same time, didn't want use callback inside loop.

are looking this? http://jsfiddle.net/djq5t/

    var selectors = ['div#northslogan', 'div#eastslogan', 'div#southslogan', 'div#westslogan'];     var words = ["list","of","random","words"]; function printwords() {      /* populate array numbers 0 through # of elements in 'words' array */     var nums = [];     (var i=0; < words.length; i++) {nums[i] = i;}      /* fade out slogan divs */     for(var i=0; < 4; i++) {         $(selectors[i]).removeclass('opaque');     }      /* generate random index , fill slogan div chosen text */     settimeout(function() {         (var i=0; < 4; ++i) {             var index = math.floor(math.random()*nums.length);             document.queryselector(selectors[i]).innerhtml = words[nums[index]];             nums.splice(index, 1);         }         /* fade in slogan divs */         for(var i=0; < 4; i++) {             $(selectors[i]).addclass('opaque');             }     }, 600);   }  printwords(); setinterval(printwords, 5000); 

---

div#northslogan,div#eastslogan,div#southslogan,div#westslogan{     opacity:0;     transition: opacity 0.6s; } .opaque{     opacity: 1 !important; } 

---