css3 animation: how to play css3 animation and keep the last frame displayed? [duplicate]

Question

I am trying to slide down a div element. SO 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;}
}

that works fine: my Box moves smoothly 100px to bottom but when animation has ended, it jumps to its initial position: Any idea on how to achieve that ?

I don't want to use jquery's animate function because it is not smooth enough with jquery.

Answer 1

In order to keep the last key frame will need add the following lines in your .movedown class

-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