title: Have an element with 2 CSS Animations executing at the same time
body: <p>I am experimenting with WebKits animations.</p>
  
  <p><strong>Is it possible for a HTML element to have more than one animation executing at the same time?</strong></p>
  
  <p>For example:</p>
  
  <pre><code>    @-webkit-keyframes FADE 
      {
         from {
            opacity: 0;
         }
         to {
            opacity: 1;
         }
      }
  
      @-webkit-keyframes TRICKY 
      {
         0% {
            -webkit-transform: translate(0px,0) rotate(-5deg) skew(-15deg,0);
         }
         50% {
            -webkit-transform: translate(-100px,0) rotate(-15deg) skew(-25deg,0);
         }
         75% {
            -webkit-transform: translate(-200px,0) rotate(-5deg) skew(-15deg,0);
         }
         100% {
            -webkit-transform: translate(0px,0) rotate(0) skew(0,0);
         }
      }
  
  // Can this element have FADE execute for 5 seconds BUT halfway between that animation
  // can I then start the TRICKY animation &amp; make it execute for 2.5 seconds?
  #myEle {
      -Webkit-animation-name: FADE TRICKY;
      -Webkit-animation-duration: 5s 2.5s;
  }
  </code></pre>
  
  <p>The above was a really simple example. I would have many libraries of animations such as rotate, fade, etc. And I dont want to have to write a special animation if I want to have an element execute 2 animations at the same time.</p>
  
  <p>Is this possible...</p>
  
  <pre><code>//Not sure if this is even valid CSS: can I merge 2 animations easily like this?
  @-webkit-keyframes FADETRICKY
  {
     FADE TRICKY;
  }
  </code></pre>