CSS3同一元素的多个转换

Question

我正在尝试为我的一个背景图像制作下拉效果.我能够使用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! */             
}            

任何帮助将非常感激.

Answer 1

你想用逗号而不是换行来链接它们

例如:

background-color 500ms linear, color 500ms linear;

Answer 2

使用cubic-bezier像这样

\n\n

cubic-bezier(0, 0.35, .5, 1.3)

\n\n

您可以使动画向后\xe2\x80\x94 或稍微反弹。

\n\n

演示（仅适用于 Firefox）

\n\n

来源

\n\n

编辑：我还为您提供了仅 Webkit 的选项，我不知道这两种技术的兼容性如何。它也可以在 Firefox 中使用-moz浏览器前缀的 Firefox 中工作，但我还没有测试过。该动画使用关键帧动画而不是过渡。

\n