Как отменить анимацию CSS3 на первой итерации (а не на второй)

у меня есть настройка анимации CSS3, как это:

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

Как отменить эту анимацию в определении класса?

например:

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

это обратит анимацию на второй итерации, я хотел бы обратить ее непосредственно на первой итерации.

3 ответов


попробуйте это:

-webkit-animation-direction: alternate-reverse;

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

просто сделайте анимацию начать на -[продолжительность] сек, чтобы сразу перейти во 2-ю анимацию;)


не совсем уверен, о чем вы говорите, но, безусловно, листать от и до значений заставит его работать в обратном направлении в первый раз.