Webkit CSS动画问题-持续动画的结束状态？

给定以下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>

.投递箱{
-webkit动画名称：drop；
-webkit动画持续时间：2秒；
-webkit动画迭代计数：1；
}
@-webkit关键帧删除{
从{
-webkit转换：translateY（0px）；
}
到{
-webkit转换：translateY（100px）；
}
}
你好，世界

Hello World文本按预期设置动画，以100px的速度下降。但是，在动画结束时，它会跳回其原始位置

显然，这在CSSland中是有意义的。动画已应用且不再作用于元素，因此原始样式生效。这对我来说似乎有点奇怪——当然，如果一个人正在将一个元素动画化，那么他会期望这种放置持续下去吗

---

是否有任何方法可以使结束位置“粘滞”，而不必借助Javascript在动画结尾的元素上标记类名或样式来修复其更改的属性？我知道这一点，但对于我所讨论的动画（该示例仅用于演示目的），过渡并没有提供所需的控制级别。如果没有这一点，复杂的动画似乎只用于循环过程，在循环过程中，元素会返回其原始状态。

如果在类中定义结束状态，则它应该执行示例中所需的操作：

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

但是，如果你的动画是事件驱动的，你可能最终不得不使用一些JavaScript。最简单的方法是使添加的类的结束状态触发动画开始

--编辑

---

有关在中添加的

动画填充模式
属性的信息，请参阅。
您可以使用-webkit动画填充模式来保持结束状态（甚至向后扩展开始状态）。不久前它被添加到WebKit中，并在iOS 4和Safari 5中发布

-webkit-animation-fill-mode: forwards;

我想你可能要找的是：

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

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

这应该让它放在正确的位置。
为了补充这里的答案，您可以使用javascript框架，例如为您处理CSS3转换的框架

根据您将要执行的转换/效果的数量，这可能是保持代码整洁的更好解决方案，而不是使用包含所有效果的大型CSS文件

这是一个非常简单的一行程序，可以实现您想要的：

Javascript:

$(".drop_box").transition({y: "+=100px"}, 2000);

还有另一种方法，只是为了好玩

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

.drop_box {
   position:absolute;
   top:100px;
  -webkit-animation-name: drop;
  -webkit-animation-duration: 2s;
  -webkit-animation-iteration-count: 1;
}

@-webkit-keyframes drop {

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

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

}
</style>

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


.投递箱{
位置：绝对位置；
顶部：100px；
-webkit动画名称：drop；
-webkit动画持续时间：2秒；
-webkit动画迭代计数：1；
}
@-webkit关键帧删除{
从{
-webkit转换：translateY（-100px）；
}
到{
-webkit转换：translateY（0px）；
}
}
你好，世界
刚刚回来发布：-）是的，似乎必须使用javascript才能实现这一点。这不是一个大问题，但对于动画模块来说还是有点失望。@Govan早在三月份，W3C www样式列表中就标准的最终外观（）以及是否有单独的动画和过渡（）进行了一些相当长的讨论。完全有可能，如果该标准继续发展，会有更好的方法来指定静态结束状态。似乎JS在所有情况下都不是必需的。正如Robertc所建议的，可以在类中实际定义结束状态。例如，如果为“顶部”设置动画，请将类中的“顶部”设置为结尾处希望的任何值，然后为动画设置值。这至少对Safari有效。因此，您确定iOS 4支持此功能吗？这在Chrome上适用，但在iOS 4上的Mobile Safari上不适用。已确认在iOS 4和iOS 5上工作。我一直被告知使用
-webkit动画播放状态执行
暂停
，但在动画完成后，您必须使用JS将其放入其中（丑陋）。这太完美了！完美答案。非常感谢！Mozilla也支持：-moz动画填充模式：向前；