Stopping CSS3 KeyFrames Animation

Question

i have animated a div as

div{
   animation-name:moveit;
  animation-duration:2s;
}

@keyframes moveit{
    0%{
     top:0;
   }
   100%{
     top:400px;
   }
}

This animation moves a div from top 0px to top=400px in 2sec.

Now the problem is when animation ends it goes back to top=0... I want that when animation ends it should remain on top=400px;

It doesnot repeat but comes back to its original position but i want it to stay at 100%

score 0 · Answer 1 · answered Apr 13 '14 at 05:38

To persist the end state of the animation you can give your div element an initial top property.

div {
  top: 400px;
  animation-name: moveit;
  animation-duration: 2s;
}

@keyframes moveit {
  0% { top: 0px; }
  100% { top: 400px; }
}

When the animation concludes the top property for your div will take over and you should have your desired effect.

1 Answers1