CSS3同一元素的多个转换 [英] CSS3 Multiple Transitions of the Same Element

问题描述

我想对我的一个背景图片做一个下拉效果。我能够使用css3，但它不完整。

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.

效果应该是一个窗帘，下降，然后排序反弹一点。 css3的问题是，我不知道如何做在同一个属性的转换，因为最后一个覆盖以前的。

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.

这里是我的代码：

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

任何帮助将不胜感激。

Any help would be much appreciated.

推荐答案

像这样使用 cubic-bezier ：

立方贝赛尔（0，0.35，.5，1.3）

演示（仅适用于Firefox）

Demo (Only works in Firefox)

来源

编辑：我也让你一个 Webkit唯一选项，我不知道这两种技术是如何兼容的。它也可以在Firefox中使用 -moz 浏览器前缀，但我没有测试它。这一个使用关键帧动画而不是转换。

I also made you a Webkit only option, I don't know how compatible these two techniques are. It may also work in Firefox with the -moz browser prefixes, but I haven't tested it. This one uses keyframe animation as opposed to transitions.

这篇关于CSS3同一元素的多个转换的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！