如何在第一次迭代（而不是第二次）上反转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;

让动画从 - [持续时间]秒开始直接跳转到第二个动画;）

Answer 3

不确定你在谈论什么，但肯定会从里面移动到值，这会让它第一次倒退。