CSS3 Несколько переходов одного и того же элемента

Я пытаюсь сделать эффект выпадения для одного из моих фоновых изображений. Я смог сделать это с помощью css3, но это не закончено.

Эффект должен представлять собой занавес, который опускается вниз, а затем как бы отскакивает назад. Проблема с css3 в том, что я не знаю, как сделать несколько переходов по одному и тому же свойству, потому что последний переход отменяет предыдущие.

Вот мой код:

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! */             
}            

Любая помощь будет очень признательна.