title: JQuery image slider and CSS transition works only once
body: <p>I'm trying to learn jQuery plugins. I'm creating a image sliding plugin. This is how I've developed so far.</p>
  
  <pre><code>(function($){
  
          $.imageSlider = function(selector, settings) {
  
          //settings
  
          var config = {      
              'delay':2000,
              'speed':500
          };
  
          if(settings) {
              $.extend(config, settings);
          }
  
          //vars
          var obj = $(selector);
  
          obj.children('img').css('transition','width 2s, height 2s, transform 2s');      
          var image = obj.children('img');
          var count = image.length;
  
          var i = 0;
  
          image.eq(0).show(); //first image showing
  
          //begin the image loop
  
          setInterval ( function() {
                  image.eq(i).fadeOut(config.speed);
                  i = (i+1 == count) ? 0 : i+1;
                  image.eq(i).fadeIn(config.speed);
                  image.eq(i).css("transform","rotate(360deg)");
              }, config.delay
          );
  
          return this;
      }
  
  })(jQuery);
  </code></pre>
  
  <p>But my the issue is the rotation happens only once cycle. </p>
  
  <p>JSFiddle <a href="http://jsfiddle.net/va45D/1/" rel="nofollow">http://jsfiddle.net/va45D/1/</a></p>
  
  <p>After all 3 images loaded as the way I wanted, then It doesn't applies the transition.</p>
  
  <p>Please help me to understand whats happening here.</p>