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

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