javascript 我如何在第一次迭代（而不是第二次）时反转 CSS3 动画
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/5500097/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How do i reverse a CSS3 animation on the first iteration (and not the second)
提问by denicio
I have setup a CSS3 animation like this:
我已经设置了这样的 CSS3 动画：
@-webkit-keyframes slidein {
from { -webkit-transform: translateX(100%); }
to { -webkit-transform: translateX(0); }
}
How do i reverse this animation on a class definition?
我如何在类定义上反转这个动画？
For example:
例如：
.slideinTransition {
-webkit-animation-name: slidein;
-webkit-animation-direction: alternate;
}
This will reverse the animation on the second iteration, i would like to reverse it directly on the first iteration.
这将在第二次迭代时反转动画，我想在第一次迭代时直接反转它。
回答by Roland Kákonyi
Try this:
试试这个：
-webkit-animation-direction: alternate-reverse;
回答by Daan
-webkit-animation: slidein 2s ease-out -2s infinite alternate forwards;
-webkit-animation: slidein 2s ease-out -2s infinite alternate forwards;
Just make the animation start at -[duration] sec to directly jump into the 2nd animation ;)
只需让动画从 -[持续时间] 秒开始即可直接跳入第二个动画；)
回答by Rich Bradshaw
Not really sure what you are talking about, but surely flipping the from and to values would make it run backwards first time.
不太确定你在说什么，但肯定会翻转 from 和 to 值会让它第一次倒退。
