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

Question

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 directly on the first iteration.

Answer 1

Try this:

-webkit-animation-direction: alternate-reverse;