如何以相反的顺序

运行CSS3动画的某些部分我想它运行后转发到运行在相反的顺序CSS3动画的某一部分。如何以相反的顺序

我想获得的部分是由50％的关键帧，以100％的反去他们已经走了向前后。

我有5个动画按顺序进入fallA，fallB，fallC，fallD和fallE，然后在fallE完成后，我需要它去掉fallE，fallD，fallC，fallB和fallA;但是，仅从100％的关键帧到50％。

有没有一种方法，我可以用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; 
     } 
    }

来源

2013-04-11 IrfanM

您可以用另一个关键帧动画制作相反的（或使用反向方向）动画，从0％到100％都有您需要的动画并且运行时间缩短一半。因此，当动画结束时，您可以使用jQuery绑定到动画结束并添加一个应用“反向”动画的类。

来源

2013-04-11 17:49:26 Fernker

你尝试过这个？

.foo{ 
animation-direction:alternate; 
-webkit-animation-direction:alternate; 
}

here是Mozilla dev的网络参考
和here W3C的参考

来源

2013-04-11 17:32:15 Yenn

正确答案，但遗憾的是错误的链接。 [w3schools与W3C无关！]（http://w3fools.com/）更好地链接到https://developer.mozilla.org/en-US/docs/CSS/animation-direction（更改并获取upvote :-) – Bergi 2013-04-11 17:40:42

是的，我只是想说。这是W3Schools的链接。检查网站W3Fools。但无论如何，谢谢。我会仔细看看的。 – IrfanM 2013-04-11 17:41:51

我明白我现在可以如何使用替代方法，但是我怎样才能将它应用到只有一半的动画（从100％到50％）向后运行，然后不再向前运行。 – IrfanM 2013-04-11 17:44:45

看一看立方贝塞尔作为宽松功能，在易于进出代替。 http://cubic-bezier.com

您必须使动画达到当前的50％标记，并且通过使用正确的贝塞尔曲线，可以使其“过冲”并返回。事情是这样的：http://cubic-bezier.com/#.29,.61,.79,3

编辑：
我不敢看你的动画代码小心足够看来。 Bezier不是你以后的样子，因为你试图创造反弹效果，而不是弹性的“overshoot”效果（如果我正确理解你的代码）http://jsfiddle.net/4KwY8/1/

解决方案并不难。你只需要diiferently定义的关键帧有点为你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/

来源

2013-04-11 17:33:51 Pevara

我很困惑我如何使用立方贝塞尔将动画逆转到某个点。它似乎只是缓和进退的替代品。 – IrfanM 2013-04-11 17:42:43

尝试把一个拨弄着你现在的代码，我会尽我所能来证明 – Pevara 2013-04-11 17:49:44

你让你的动画的目标中途点并使用贝塞尔缓了50％，过冲，然后在中间完成了。这肯定是一个黑客？ – 2013-04-11 17:49:54

而不是试图把代码的动画，工作轮CSS 3个转换的所有限制，我建议你做你自己一个大忙，并使用不同的JavaScript库吐温如Greensock animation platform（GSAP）之一。

它非常强大，支持延迟，错开，重复，循环，反向等。您可以用GSAP在几行内重写上述内容（以及所需的附加功能）。

你可以看到它如何对CSS 3周的过渡here。

来源

2013-04-11 17:36:30

如何以相反的顺序

回答

相关问题