title: How to chain multiple -webkit-transition animations in my css without keyframes
body: <p>I'm trying to chain multiple -webkit-transition animations in my css without keyframes.</p>
  
  <p>I know that is possible if I call a keyframe animation, but I just want to overwrite the proprieties and something in this JS doesn't work:</p>
  
  <pre><code>var firstTransition = { '-webkit-transition': 'opacity 1000ms ease-in 1000ms', 'opacity': 1 }
  var secondTransition = { '-webkit-transition': 'opacity 1000ms ease-in 1000ms', 'opacity': 0 }
  
  $('theDiv').setStyles(firstTransition)
  
  changeColor.delay(3000);
  
  function changeColor(){
  
      $('theDiv').setStyles(secondTransition);
  }
  </code></pre>
  
  <p>Here is the fiddle:
  <a href="http://jsfiddle.net/a2co/Tn9mT/25/" rel="nofollow">http://jsfiddle.net/a2co/Tn9mT/25/</a></p>