如何在第一次迭代(而不是第二次迭代)上反转CSS3动画？

Question

我已经像这样设置了一个CSS3动画：

@-webkit-keyframes slidein {
    from { -webkit-transform: translateX(100%); }
    to   { -webkit-transform: translateX(0); }
}

如何在类定义上反转此动画？

例如：

.slideinTransition {
    -webkit-animation-name: slidein;
    -webkit-animation-direction: alternate;
}

这将在第二次迭代中反转动画，我想直接在第一次迭代中反转它。

Answer 1

试试这个：

-webkit-animation-direction: alternate-reverse;

Answer 2

-webkit-animation: slidein 2s ease-out -2s infinite alternate forwards;

只需将动画从-duration秒开始，即可直接跳到第二个动画;)

Answer 3

我真的不确定你在说什么，但是可以肯定的是，反转from和to的值会让它第一次向后运行。