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进行动画。然而，在动画结束时，它会跳回到原来的位置。

显然在CSS领域这很有道理。动画已经应用并且不再影响元素，因此原始样式起作用。但对我来说似乎有点奇怪 - 如果正在将元素动画放置到位，那么人们肯定希望该位置保持不变呢？

是否有任何方法使结束位置“粘性”，而无需诉诸JavaScript来在动画结束时为元素打标签或设置样式以修复其更改的属性？我知道转换过渡是持久的，但是对于我提出的动画（示例仅用于演示目的），过渡不能达到所需的控制水平。如果没有这个功能，似乎复杂的动画只对于圆形过程有用，其中元素最终回到其原始状态。

- Govan

Answer 1

您可以使用-webkit-animation-fill-mode来保留最终状态（甚至将起始状态向后延伸）。它在一段时间前已添加到WebKit中，并在iOS 4和Safari 5中发布。

-webkit-animation-fill-mode: forwards;

- dino

---

你确定这在iOS 4中支持吗？这在Chrome上对我们有效，但在iOS 4的移动Safari上却无效。 - Crashalot

已确认可在iOS 4和iOS 5上运行。 - Raptor

我一直被告知要使用-webkit-animation-play-state和pause，但是必须在动画完成后使用JS将其放入其中（很丑陋）。这太完美了！ - Oscar Godson

在Mozilla中也支持： -moz-animation-fill-mode: forwards; （注：该代码用于CSS动画中，指定动画结束后元素的状态是否应保留为最终状态。"forwards"表示动画结束后元素将保留最终状态。） - Makc

目前，在Mozilla Firefox中支持无前缀的 animation-fill-mode: forwards;。 - Johnride

Answer 2

如果你在类中定义了结束状态，那么它应该会按照你的期望运行示例：

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

但是如果你的动画是基于事件驱动的，你可能最终需要使用一些JavaScript。最简单的方法是使添加具有结束状态的类来触发动画开始。

--编辑

关于在dino's answer中添加的animation-fill-mode属性，请参见2012年4月WD的信息。

- robertc

---

刚想回复这个 :-)是的，似乎必须使用JavaScript才能实现这一点。虽然不是什么大问题，但在一个旨在成为动画模块的工具中还是有些令人失望。 - Govan

@Govan 在W3C www-style列表中，曾经有几次关于标准最终应该是什么样子的讨论（http://lists.w3.org/Archives/Public/www-style/2010Mar/0469.html），以及是否需要单独的动画和过渡效果（http://lists.w3.org/Archives/Public/www-style/2010Mar/0230.html）。如果标准得到推进，完全有可能会有更好的指定静态结束状态的方法。 - robertc

似乎在所有情况下都不一定需要JS。正如Robertc所建议的那样，实际上可以在类中定义最终状态。例如，如果您要动画化顶部，则将顶部设置为类中最终想要的值，然后设置动画的值。这至少在Safari上有效。 - user18490

Answer 3

补充一下这里的好答案，你可以使用一个JavaScript框架，比如jQuery Transit，它可以为你处理CSS3过渡效果。

根据你将要执行的过渡/效果数量，这可能是更好的解决方案，以保持你的代码整洁，而不是使用一个大的CSS文件来保存所有效果。

这是一个非常简单的一行代码，可以实现你想要的效果：

JavaScript：

$(".drop_box").transition({y: "+=100px"}, 2000);

{{链接1：JS Fiddle演示}}

- Gaff

Answer 4

我认为你可能在寻找的是：

0% {
  -webkit-transform: translateY(0px);
}

100% {
  -webkit-transform: translateY(100px);
}

这应该把它留在正确的位置。

- Michael Mullany

Answer 5

还有另一种方式可以这样做，只是为了好玩而已。

    <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>

- apaul