CODEWITHSUNDEEP
google-chromecsswebkit
zanona
zanona

Reputation: 12717

reverse -webkit-animation iteration for hiding element

I have this animation which I use for a div appear on screen so it comes from the bottom and stays at its final position.

@-webkit-keyframes slide {
  from  {  opacity: 0;  -webkit-transform: translateY(500px); }
  to    {  opacity: 1;  -webkit-transform: translateY(0);     }
}

.module {
    -webkit-animation: slide .4s 0 1 normal ease none;
}

I was thinking if it is possible that when I assign class='done' for that div it could take the same animation and play it reversely simulating the same effect hiding the div. like: 

.module.done {
    -webkit-animation: slide .4s 0 1 alternate ease none;
}

but it seems it always start from the 1 iteration in the second case I would like to reverse the animation so it could start from the original position and then slide up 500px

Is it possible to achieve using the same animation or do I have to create a new one with inverted values?

Thanks

Upvotes: 0

Views: 1018

Answers (2)

methodofaction
methodofaction

Reputation: 72425

This specific use case works best with CSS transitions, plus you get free Opera and FF 3.5+ support. This is the basic syntax:

#notice {
  -vendor-transition: -webkit-transform 2s ease;
}

#notice.pop {
  -vendor-transform: translateY(50px);
}

When you add or remove .pop, the animation is automatically done for you.

Check out the working example: http://jsfiddle.net/qLKzX/

Upvotes: 3

Michael Mullany
Michael Mullany

Reputation: 31750

I believe you can do this by setting the animation-delay to an appropriate negative value (so it starts at the first reversal).

Upvotes: 0

Related Questions