Question

I have a CSS3 animation, that simply moves a <div> down (via top: 0px; to top: 300px;). But my problem is, I don’t know how to prevent the <div> from returning to the top when the animation is finished. Is there a way I can prevent this?

Here’s a sample fiddle: http://jsfiddle.net/y8tJ7/

Answer 1

You need to invert the animation like so.

@keyframes move {
  from{
    top: 20px;
  }
}

See http://jsfiddle.net/gleezer/y8tJ7/1/

This way its finishing position is specified in the div styling and you only specify the beginning state in the keyframe.

EDIT: Another way of achieving it could be to simply add:

animation-fill-mode: forwards.

See this other fiddle.

Some more info about it on Mozilla Dev Network.