Webkit CSS动画问题 – 坚持动画的结束状态？

参见英文答案 > Maintaining the final state at end of a CSS3 animation2个答案给定以下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，在类的名称或样式标记到动画结束时的元素，以修复其改变的属性？我知道transitions persist，但是对于我有问题的动画(示例是仅用于演示目的)转换不提供所需的控制级别。没有这一点，似乎复杂的动画只能用于循环过程，其中元素结束其原始状态。

解决方法

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

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

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

– 编辑

有关在April 2012 WD中添加的animation-fill-mode属性的信息，请参阅dino’s answer。

Webkit CSS动画问题 – 坚持动画的结束状态？

解决方法

相关文章