How do i reverse a CSS3 animation on the first iteration (and not the second)

I have setup a CSS3 animation like this:

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

How do i reverse this animation on a class definition?

For example:

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

This will reverse the animation on the second iteration, i would like to reverse it directl开发者_JS百科y on the first iteration.

Try this:

-webkit-animation-direction: alternate-reverse;

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

Just make the animation start at -[duration] sec to directly jump into the 2nd animation ;)

Not really sure what you are talking about, but surely flipping the from and to values would make it run backwards first time.