71

给定以下 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 在动画结束时将类名或样式标记到元素上以修复其更改的属性？我知道过渡仍然存在，但是对于我所讨论的动画（示例仅用于演示目的）过渡并没有提供所需的控制级别。没有这个，复杂的动画似乎只用于元素最终回到其原始状态的循环过程。

4

5 回答 5

147

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

-webkit-animation-fill-mode: forwards;
于 2010-08-08T01:45:26.030 回答
33

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

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

但是，如果您的动画无论如何都是事件驱动的，那么您最终可能不得不使用一些 JavaScript。最简单的方法是使添加具有结束状态的类成为触发动画开始的原因。

- 编辑

有关2012 年 4 月 WD中添加的属性的信息，请参阅dino 的答案。animation-fill-mode

于 2010-07-18T12:02:11.953 回答
1

只是为了在这里添加出色的答案，您可以使用jQuery Transit等 JavaScript 框架来为您处理 CSS3 转换。

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

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

Javascript：

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

JS 小提琴演示

于 2013-03-22T17:32:58.977 回答
0

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

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

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

这应该将其留在正确的位置。

于 2010-08-24T23:22:06.033 回答
0

还有另一种方法，只是为了踢球，

    <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>
于 2013-03-24T16:33:56.713 回答