Css3 animation: how to play css3 animation and display the last frame?

Question

I am trying to offset the div element. I just use:

$("#myBox").addClass("moveDown");

---

.moveDown {
    animation:mymove 1s ease-out forwards;
    -webkit-animation:mymove 1s ease-out infinite;
}
@keyframes mymove { 
    from {top:0px; opacity: 0;}
    to {top:100px; opacity: 1}
}

@-webkit-keyframes mymove {
    from {top:0px; opacity: 0;}
    to {top:100px; opacity: 1;}
}

which works great: my drawer moves smoothly 100 pixels down, but when the animation is over, it goes back to its original position: any idea on how to do this?

I do not want to use the jquery animation function because it is not smooth enough with jquery.

Answer 1

An easy way would be to use CSS transitions instead of CSS animations:

#myBox {
  top: 0;
  opacity: 0;
  transition: all 1s;
}
#myBox.moveDown {
  top: 100px;
  opacity: 1;
}

Works with the same jQuery that you wrote.

Answer 2

To save the last keyframe, you need to add the following lines to the .movedownclass

-webkit-animation-fill-mode: forwards
animation-fill-mode: forwards
-moz-animation-fill-mode: forwards
-ms-animation-fill-mode: forwards

Example

.moveDown {
 animation:mymove 1s ease-out forwards;
 -webkit-animation:mymove 1s ease-out infinite;
 -webkit-animation-fill-mode: forwards
 animation-fill-mode: forwards
 -moz-animation-fill-mode: forwards
 -ms-animation-fill-mode: forwards