我试图在向前运行后以相反的顺序运行CSS3动画的某个部分。
我想要获得的部分是50％到100％的关键帧在他们前进之后反过来。
我有5个动画按顺序fallA，fallB，fallC，fallD和fallE然后在fallE完成之后，我需要它去fallE，fallD，fallC，fallB和fallA;但是，只有50％的关键帧来自它的100％。
有没有办法可以用CSS甚至javascript / jquery来做到这一点？
这是动画代码：
.animated.fallA{
-moz-animation: fallA 1s forwards ease-in-out;
-webkit-animation: fallA 1s forwards ease-in-out;
animation: fallA 1s forwards ease-in-out;
}
.animated.fallB{
-moz-animation: fallB 1.2s forwards ease-in-out;
-webkit-animation: fallB 1.2s forwards ease-in-out;
animation: fallB 1.2s forwards ease-in-out;
}
.animated.fallC{
-moz-animation: fallC 1.4s forwards ease-in-out;
-webkit-animation: fallC 1.4s forwards ease-in-out;
animation: fallC 1.4s fowards ease-in-out;
}
.animated.fallD{
-moz-animation: fallD 1.6s forwards ease-in-out;
-webkit-animation: fallD 1.6s forwards ease-in-out;
animation: fallD 1.6s forwards ease-in-out;
}
.animated.fallE{
-moz-animation: fallE 1.8s forwards ease-in-out;
-webkit-animation: fallE 1.8s forwards ease-in-out;
animation: fallE 1.8s forwards ease-in-out;
}
@-moz-keyframes fallA{
0%{
position:relative;
opacity:0.0;
top:-100px;
}
50%{
opacity:1.0;
top:0;
}
100%{
top:0;
}
}
@-webkit-keyframes fallA{
0%{
position:relative;
opacity:0.0;
top:-100px;
}
50%{
opacity:1.0;
top:0;
}
100%{
top:0;
}
}
@keyframes fallA{
0%{
position:relative;
opacity:0.0;
top:-100px;
}
50%{
opacity:1.0;
top:0;
}
100%{
top:0;
}
}
@-moz-keyframes fallB{
0%{
position:relative;
opacity:0.0;
top:-100px;
}
50%{
opacity:1.0;
top:0;
}
100%{
top:-20px;
}
}
@-webkit-keyframes fallB{
0%{
position:relative;
opacity:0.0;
top:-100px;
}
50%{
opacity:1.0;
top:0;
}
100%{
top:-20px;
}
}
@keyframes fallB{
0%{
position:relative;
opacity:0.0;
top:-100px;
}
50%{
opacity:1.0;
top:0;
}
100%{
top:-20px;
}
}
@-moz-keyframes fallC{
0%{
position:relative;
opacity:0.0;
top:-100px;
}
50%{
opacity:1.0;
top:0;
}
100%{
top:-30px;
}
}
@-webkit-keyframes fallC{
0%{
position:relative;
opacity:0.0;
top:-100px;
}
50%{
opacity:1.0;
top:0;
}
100%{
top:-30px;
}
}
@keyframes fallC{
0%{
position:relative;
opacity:0.0;
top:-100px;
}
50%{
opacity:1.0;
top:0;
}
100%{
top:-30px;
}
}
@-moz-keyframes fallD{
0%{
position:relative;
opacity:0.0;
top:-100px;
}
50%{
opacity:1.0;
top:0;
}
100%{
top:-20px;
}
}
@-webkit-keyframes fallD{
0%{
position:relative;
opacity:0.0;
top:-100px;
}
50%{
opacity:1.0;
top:0;
}
100%{
top:-20px;
}
}
@keyframes fallD{
0%{
position:relative;
opacity:0.0;
top:-100px;
}
50%{
opacity:1.0;
top:0;
}
100%{
top:-20px;
}
}
@-moz-keyframes fallE{
0%{
position:relative;
opacity:0.0;
top:-100px;
}
50%{
opacity:1.0;
top:0;
}
100%{
top:0;
}
}
@-webkit-keyframes fallE{
0%{
position:relative;
opacity:0.0;
top:-100px;
}
50%{
opacity:1.0;
top:0;
}
100%{
top:0;
}
}
@keyframes fallE{
0%{
position:relative;
opacity:0.0;
top:-100px;
}
50%{
opacity:1.0;
top:0;
}
100%{
top:0;
}
}
答案 0 :(得分：2)
.foo{
animation-direction:alternate;
-webkit-animation-direction:alternate;
}
答案 1 :(得分：2)
看看立方贝塞尔作为缓和函数，而不是轻松进出。 http://cubic-bezier.com
你必须让你的动画达到目前的50％标记，并且通过使用正确的bezier，你可以让它“过冲”并向后移动。这样的事情：http://cubic-bezier.com/#.29,.61,.79,3
修改
看起来我没有仔细看你的动画代码。 Bezier不是你追求的，因为你正试图创造一个反弹效果，而不是弹性的“过冲”效果（如果我正确理解你的代码）http://jsfiddle.net/4KwY8/1/
解决方案并不那么难。你只需要为你的fallB，C和D定义你的关键帧有点不同.css看起来像这样：
@keyframes fallB{
0%{
position:relative;
opacity:0.0;
top:-100px;
}
33%, 100%{
opacity:1.0;
top:0;
}
66%{
top:-20px;
}
}
正如您所看到的，我将中间关键帧用于1/3点和3/3点。这种变化的小提琴包括如下：http://jsfiddle.net/4KwY8/2/
我认为这就是你所追求的。你可能不得不在时间和关键帧定位方面做一些微调，但我认为你得到了一般的想法。如果不清楚，请随时询问。
PS：有了灵感，可以在这里找到更酷的css动画效果：http://daneden.me/animate/
答案 2 :(得分：2)
我没有尝试手动编写动画代码，而是围绕CSS 3过渡的所有限制，我建议你自己做一个大忙，并使用各种JavaScript补间库之一，例如Greensock animation platform （GSAP）。
它非常强大，支持延迟，交错，重复，循环，反转等。您可以使用GSAP在几行中重写上述内容（以及您需要的其他功能）。
你可以看到它如何与CSS 3转换here叠加。
答案 3 :(得分：0)
您可以反向（或使用方向反转）编写另一个关键帧动画，其动画范围为0％到100％，并且运行时间只有一半。因此，当动画结束时，您可以使用jQuery绑定到动画结尾并添加一个应用“反向”动画的类。