13

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.

1
  • 1
    thanks for posting this question. didn't find how to avoid the creation of a slideOutTransition myself neither. I would be great if we could just add another class with something like "-webkit-animation:reverse" to trigger the animation in the other way... Jan 4, 2013 at 16:21

3 Answers 3

18

Try this:

-webkit-animation-direction: alternate-reverse;
1
  • 2022 Update: webkit is no longer needed now, animation-direction: alternate-reverse will be just fine
    – louielyl
    Dec 1, 2022 at 3:47
10

-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 ;)

0
0

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

2
  • 1
    Thanks for the answer, but this is exactly what I want to avoid. On a more complex animation i would not want to rewrite the animation in reverse, but instead i would like to reverse the animation by a simple command in the class definition.
    – denicio
    Mar 31, 2011 at 14:07
  • AFAIK there isn't a better way to do this. I've read through developer.apple.com/library/safari/#documentation/InternetWeb/… , and didn't see anything particularly helpful. Maybe file a webkit bug? Mar 31, 2011 at 14:14

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.