title: Chain two css effect one after another with Jquery
body: <p>I try to chain two css transition effect</p>
  
  <p>Works well with animate :</p>
  
  <pre><code>$('.txt').css({'transition': 'transform .5s ease-in-out ', 
  'transform': 'translate(30px, 30px)'}).delay(500)
  .animate({fontSize:'2em'},0).delay(500)
  .animate({height:100},0);
  </code></pre>
  
  <p><a href="http://jsfiddle.net/vx2kpmo5/105/" rel="nofollow noreferrer">http://jsfiddle.net/vx2kpmo5/105/</a></p>
  
  <p>What I actually want is not working properly, why ? :</p>
  
  <pre><code>$('.txt').css({'transition': 'transform .5s ease-in-out ', 
  'transform': 'translate(30px, 30px)'}).delay(2000)
  .css({'transition': 'transform 1.5s ease-in',
  'transform': 'scale(1.1, 1.1)', 'transform-origin': 'top left'});
  </code></pre>
  
  <p><a href="http://jsfiddle.net/vx2kpmo5/103/" rel="nofollow noreferrer">http://jsfiddle.net/vx2kpmo5/103/</a></p>
  
  <p>Plus, how to tigger these animations for each .txt class one after another, not at the same as in the example above ?</p>
  
  <p>Regards</p>