title: CSS3 Multiple Transitions of the Same Element
body: <p>I am trying to make a dropdown effect for one of my background images.  I was able to do it using css3 but it's not complete.  </p>
  
  <p>The effect is supposed to be a curtain that drops down then sort of bounces back up a little.  The problem with css3 is that I don't know how to do to transitions on the same property because the last one overrides the previous ones.</p>
  
  <p>Here's my code:</p>
  
  <pre><code>ul#nav li a {
    /* ADDS THE DROPDOWN CURTAIN TO THE LINKS BUT HIDDEN OFF SCREEN */
    background: url(images/drape2.png) 0px -149px no-repeat;
    /* CSS3 transitions */         
    -moz-transition: all 200ms ease-in-out;         
    -webkit-transition: all 200ms ease-in-out;         
  } 
  
  ul#nav li a:hover {            
    /* Action to do when user hovers over links */                          
    background-position: 0px 0px; /* make drape appear, POOF! */             
    background-position: 0px -10px; /* make drape appear, POOF! */             
  }            
  </code></pre>
  
  <p>Any help would be much appreciated.   </p>