Webkit CSS 动画问题 - 保持动画的结束状态？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/3273478/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Webkit CSS Animation issue - persisting the end state of the animation?
提问by Govan
Given the following CSS3 animation....
鉴于以下 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>
The Hello World text animates as expected dropping down 100px. However, at the end of the animation it jumps back to its original position.
Hello World 文本按预期动画下降 100 像素。但是，在动画结束时，它会跳回到原来的位置。
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?
显然，这在 CSSland 中是有意义的。动画已应用，不再作用于元素，因此原始样式生效。不过，对我来说似乎有点奇怪 - 当然，如果一个人正在将一个元素动画到位，那么人们会期望该放置持续存在吗？
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.
是否有任何方法可以使结束位置“粘性”，而不必求助于 Javascript 在动画结束时将类名或样式标记到元素上以修复其更改的属性？我知道过渡仍然存在，但是对于我所讨论的动画（该示例仅用于演示目的），过渡没有提供所需的控制级别。如果没有这个，复杂的动画似乎只用于元素最终回到其原始状态的循环过程。
采纳答案by robertc
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;
}
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.
但是如果你的动画无论如何都是事件驱动的，你最终可能不得不使用一些 JavaScript。最简单的方法是添加具有结束状态的类作为触发动画开始的原因。
--edit
- 编辑
See dino's answerfor information on the animation-fill-modeproperty added in the April 2012 WD.
有关2012 年 4 月 WD 中添加的属性的信息，请参阅dino 的回答。animation-fill-mode
回答by dino
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 来保持结束状态（甚至向后扩展开始状态）。它不久前被添加到 WebKit 中，并在 iOS 4 和 Safari 5 中发布。
-webkit-animation-fill-mode: forwards;
回答by ROFLwTIME
Just to add to the great answers here, you could use a javascript framework such as jQuery Transitthat handles the CSS3 transitions for you.
只是为了增加这里的出色答案，您可以使用jQuery Transit等 javascript 框架来处理 CSS3 转换。
Depending on how many transitions/effects you will be doing, this may be a better solution in keeping your code clean rather than keeping up with a large CSS file that has all of your effects in it.
根据您将要执行多少过渡/效果，这可能是保持代码干净的更好解决方案，而不是跟上包含所有效果的大型 CSS 文件。
This is a very simple one-liner that accomplishes what you want:
这是一个非常简单的单行代码，可以完成您想要的：
Javascript:
Javascript：
$(".drop_box").transition({y: "+=100px"}, 2000);
JS Fiddle Demo
JS小提琴演示
回答by apaul
Yet another way to do this, just for kicks,
另一种方法来做到这一点，只是为了踢球，
<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>
回答by Michael Mullany
I think what you might be looking for is:
我想你可能正在寻找的是：
0% {
-webkit-transform: translateY(0px);
}
100% {
-webkit-transform: translateY(100px);
}
This should leave it in the right place.
这应该把它放在正确的地方。
