Webkit CSS Animation 问题 - 保持动画的结束状态？ [复制]

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

显然这在 CSSland 中是有意义的。动画已应用且不再作用于元素，因此原始样式生效。不过，这对我来说似乎有点奇怪 - 如果有人将一个元素设置为动画，那么人们会期望这种放置会持续存在吗？

有没有什么方法可以让结束位置变得“粘性”，而无需借助 Javascript 在动画结束时将类名或样式标记到元素上以修复其更改的属性？我知道transitions persist，但是对于我有问题的动画（示例仅用于演示目的）过渡并没有提供所需的控制级别。没有这个，复杂的动画似乎只能用于元素最终回到其原始状态的循环过程。

Answer 1

还有另一种方法，只是为了好玩，

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

Answer 2

只是为了在此处添加出色的答案，您可以使用诸如 jQuery Transit 之类的 JavaScript 框架来为您处理 CSS3 转换。

根据您将要执行的过渡/效果的数量，这可能是保持代码整洁的更好解决方案，而不是跟上包含所有效果的大型 CSS 文件。

这是一个非常简单的单线，可以完成您想要的：

Javascript：

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

JS Fiddle Demo

Answer 3

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

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

Answer 4

您可以使用 -webkit-animation-fill-mode 来保持结束状态（甚至向后扩展开始状态）。它不久前被添​​加到 WebKit 中，并在 iOS 4 和 Safari 5 中发布。

-webkit-animation-fill-mode: forwards;

Answer 5

我认为您可能正在寻找的是：

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

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

这应该把它留在正确的地方。