title: why is setTimeout activating my animation ?
body: <p>hey guys have a look at this fiddle : </p>
  
  <p><a href="http://jsfiddle.net/5vb9jhq9/" rel="nofollow">Fiddle</a>. </p>
  
  <p>now what i am doing in this fiddle is when i click on any li element , i have a data attribute attached to each li element , and the Jquery code basically grabs the perticular li elements data value and displays it in a div , now i'd really like to combine CSS-3 and Jquery togeather . </p>
  
  <p>with CSS-3 , every time i click on a li , it should have a small animation , I.E the below animation should be activated : </p>
  
  <pre><code>@keyframes rotate {
      0% {
          transform:rotateX(50deg) translateY(-20px);
          /*transform: translateX(100px);*/
      }
      100% {
          transform:rotateX(0deg) translateX(0px);
      }
  }
  .animated {
      -webkit-animation-name: rotate;
      -o-animation-name: rotate;
      animation-name: rotate;
      -webkit-animation-duration: 1s;
      -o-animation-duration: 1s;
      animation-duration: 1s;
  }
  </code></pre>
  
  <p>I.E the animation should be activated before the li data can be displayed . </p>
  
  <p>now my Jquery code is as follows : </p>
  
  <pre><code>$(document).ready(function () {
                  $('ul').on('click', 'li', function () {
                      $this = $(this);
                      var _stor = $this.data('says');
                      $('.testimo').removeClass('animated').html(_stor).addClass('animated');
                  });
              });
  </code></pre>
  
  <p>now , i got my problem solved by asking one of my senior colleagues , he just said to use the setTimeOut function and so i changed my Jquery code to something as follows : </p>
  
  <pre><code>$(document).ready(function () {
      $('ul').on('click', 'li', function () {
          $this = $(this);
          var _stor = $this.data('says');
          $('.testimo').removeClass('animated');
          setTimeout(function(){
              $('.testimo') .html(_stor).addClass('animated');
          },100)
      });
  });
  </code></pre>
  
  <p>Thsi works perfectly the way i want it to . but my question is WHY does this code work ? what is setTimeout have to do with an animation anyway ? my question is why does the code with setTimeout work ? </p>
  
  <p>Heres the fiddle with <a href="http://jsfiddle.net/5vb9jhq9/3/" rel="nofollow">setTimeout</a>. </p>
  
  <p>Thank you. </p>
  
  <p>Alexander. </p>