Use css to move div to a new location then stop there

Question

Is there a pure CSS way to move a div from one place to another and stop. What I have jumps back to original place.

#animate {
  position: absolute;
  top: 0px;
  left: 0px; 
  animation: move 3s ease;
}



@keyframes move {
   from { transform: translateX(0px); }
   to { transform: translateX(500px); }
}

If I need JS for this, is there are way to condition on the end of the animation instead of moving it with timeout??

Answer 1

Try adding:

#animate {
  // other styles...
  animation-fill-mode: forwards;
  -webkit-animation-fill-mode: forwards;
}

You can see this working here.

Credit to this answer.