Webkit CSS动画问题 - 坚持动画的结束状态？ [英] Webkit CSS Animation issue - persisting the end state of the animation?

问题描述

给定以下CSS3动画....

Given the following CSS3 animation....

<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文本按预期下降100像素。但是，在动画结束时，它会跳回到其原始位置。

The Hello World text animates as expected dropping down 100px. However, at the end of the animation it jumps back to its original position.

显然，这在CSSland中是有意义的。动画已应用，不再对元素起作用，因此原始样式生效。对我来说看起来有点奇怪 - 当然，如果一个动画的元素到位，那么人们会期望放置持续？

Clearly this makes sense in CSSland. The animation has been applied and is no longer acting on the element so the original styles take effect. It seems slightly odd to me though - surely if one is animating an element into place then one would expect that placing to persist?

有任何方式的结束位置'sticky'，而不必诉诸于Javascript来在动画结束时将一个类名或样式标记到元素上，以修复其改变的属性？我知道过渡仍然存在，但对于动画我有问题（示例是为演示目的）转换不提供所需的控制级别。没有这个，似乎复杂的动画只能用于循环过程，其中的元素结束了其原始状态。

Is there any way of making the end position 'sticky' without having to resort to Javascript to tag a classname or style onto the element at the end of the animation to fix its altered properties? I know that transitions persist, but for the animation I have in question (the example is for demonstration purposes only) transitions don't give the level of control needed. Without this, it seems that complex animations are only of use for circular processes where the element ends up back in its original state.

推荐答案

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

If you define the end state in the class then it should do what you want in the example:

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

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

But if your animation is event driven anyway you will probably end up having to use a bit of JavaScript. The easiest way is to make the adding of the class with the end state in it be what triggers the animation to start.

- 编辑

有关动画填充模式的信息，请参见 dino的回答 属性已添加到 2012年4月WD 。

这篇关于Webkit CSS动画问题 - 坚持动画的结束状态？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！