Webkit CSS动画问题-是否保留动画的结束状态？

Question

给定以下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在动画结束时在元素上标记类名或样式来修复其更改的属性？我知道过渡仍然存在)，但是对于我所讨论的动画（该示例仅用于演示目的），过渡无法提供所需的控制级别。否则，似乎复杂的动画仅用于循环过程，在循环过程中，元素最终返回其原始状态。

Answer 1

如果您在类中定义结束状态，那么它应该按照示例中的说明进行操作：

.drop_box {
    -webkit-transform: translateY(100px);
    -webkit-animation-name: drop;
    -webkit-animation-duration: 2s;
    -webkit-animation-iteration-count: 1;
}

但是，无论如何，如果动画是事件驱动的，则最终可能不得不使用一些JavaScript。最简单的方法是使添加具有结束状态的类成为触发动画开始的原因。

css3-animations-20120403/)添加的属性的信息，请参见[dino的答案