Webkit CSS Animation issue - persisting the end state of the animation?

Question

Given the following CSS3 animation....

<style type="text/css" media="screen">

.drop_box {
  -webkit-animation-name: drop;
  -webkit-animation-duration: 2s;
  -webkit-animation-iteration-count: 1;
}

@-webkit-keyframes drop {

  from {
    -webkit-transform: translateY(0px);
  }

  to {
    -webkit-transform: translateY(100px);
  }

}
</style>

<div class="drop_box">  
    Hello world
</div>

The Hello World text animates as expected dropping down 100px. However, at the end of the animation it jumps back to its original position.

Clearly this makes sense in CSSland. The animation has been applied and is no longer acting on the element so the original styles take effect. It seems slightly odd to me though - surely if one is animating an element into place then one would expect that placing to persist?

Is there any way of making the end position 'sticky' without having to resort to Javascript to tag a classname or style onto the element at the end of the animation to fix its altered properties? I know that transitions persist, but for the animation I have in question (the example is for demonstration purposes only) transitions don't give the level of control needed. Without this, it seems that complex animations are only of use for circular processes where the element ends up back in its original state.

Answer 1

You can use -webkit-animation-fill-mode to persist the end state (or even extend the start state backwards). It was added to WebKit a while ago, and shipped in iOS 4 and Safari 5.

-webkit-animation-fill-mode: forwards;