给定以下CSS3动画。…

<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>

“ Hello World”文本动画会按预期下降100px。但是，在动画结束时，它会跳回到其原始位置。

显然，这在CSSland中是有意义的。动画已应用且不再作用于元素，因此原始样式生效。不过，这对我来说似乎有些奇怪-
当然，如果有人将某个元素动画化到位，那么人们会期望该位置继续存在吗？

有什么方法可以使结束位置“粘滞”，而不必借助Javascript在动画结束时在元素上标记类名或样式来修复其更改的属性？我知道过渡仍然存在)，但是对于我所讨论的动画（该示例仅用于演示目的），过渡无法提供所需的控制级别。否则，似乎复杂的动画仅用于循环过程，在循环过程中，元素最终返回其原始状态。