css3 animation: how to play css3 animation and keep the last frame displayed?
<p>I am trying to slide down a div element.
SO I just use: </p>

<pre><code>$("#myBox").addClass("moveDown");
</code></pre>

<hr>

<pre><code>.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;}
}
</code></pre>

<p>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 ?</p>

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