相关疑难解决方法(0)

给出以下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在动画结尾处将类名或样式标记到元素上以修复其更改的属性？我知道转换仍然存在,但对于我所讨论的动画(该示例仅用于演示目的),转换不提供所需的控制级别.如果没有这个,似乎复杂的动画仅用于循环过程,其中元素以其原始状态结束.