Stopping a CSS animation but letting its current iteration finish

Question

I have the following HTML:

​

And the following CSS:

@-webkit-keyframes rotate {
  t         


        

Answer 1

Do you mean you want the animation to stop where it is when it ends without jumping back to its original position?

Then you want:

Animate something moving from one place to another and have it stay there: animation-fill-mode:forwards;

check this link:

http://www.w3schools.com/cssref/css3_pr_animation-fill-mode.asp