Как изменить анимацию 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

Не совсем уверен, о чем вы говорите, но, безусловно, переключение значений from и to заставит его работать в обратном направлении в первый раз.