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

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;

Answer 2

如果您在类中定义了结束状态,那么它应该在示例中执行您想要的操作:

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

但是如果你的动画是事件驱动的,那么你可能最终不得不使用一些JavaScript.最简单的方法是在其中添加具有结束状态的类是触发动画启动的内容.

- 编辑

有关2012年4月WD增加的房产信息,请参阅dino的答案.animation-fill-mode