Webkit的CSSanimation问题 – 坚持animation的结束状态？
鉴于以下CSS3animation….
<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> 世界您好世界文本animation如预期下降100px。 但是，在animation结束时，它会跳回原来的位置。
显然这在CSSland中是有意义的。 animation已经被应用，不再作用于元素，所以原始样式生效。 这对我来说似乎有点奇怪 – 当然，如果一个animation元素到位，那么人们会期望放置持续？
有没有什么办法让结束位置“粘性”，而不必诉诸于JavaScript来标记一个类名或样式到animation结尾的元素来修复其改变的属性？ 我知道转换依然存在 ，但对于我所讨论的animation（这个例子只是为了演示的目的）转换并不能提供所需的控制级别。 如果没有这个，看起来复杂的animation只能用于元素最终回到原始状态的循环过程。
如果你在类中定义了最终状态，那么它应该在这个例子中做你想做的事情：
.drop_box { -webkit-transform: translateY(100px); -webkit-animation-name: drop; -webkit-animation-duration: 2s; -webkit-animation-iteration-count: 1; }
但是如果你的animation无论如何都是事件驱动的，你可能最终不得不使用一些JavaScript。 最简单的方法是添加具有结束状态的类，从而触发animation的启动。
– 编辑
有关2012年4月WD添加的animation-fill-mode属性的信息，请参阅迪诺的答案 。
您可以使用-webkit-animation-fill-mode来保持结束状态（或者甚至向后延伸启动状态）。 它刚刚被添加到WebKit，并在iOS 4和Safari 5中发货。
-webkit-animation-fill-mode: forwards;
只需要在这里添加好的答案，您可以使用一个JavaScript框架，如jQuery Transit ，为您处理CSS3转换。
根据你将要做的转换/效果的多less，这可能是一个更好的解决scheme，保持你的代码干净，而不是跟上一个大的CSS文件，其中包含所有的效果。
这是一个非常简单的完成你想要的任务：
使用Javascript：
$(".drop_box").transition({y: "+=100px"}, 2000);
JS小提琴演示
我想你可能要找的是：
0% { -webkit-transform: translateY(0px); } 100% { -webkit-transform: translateY(100px); }
这应该把它放在正确的地方。
还有另外一个方法可以做到这一点，
<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>
