CSS3链式动画

Question

我有一系列需要对某些文本执行的动画效果，计划使用CSS3来实现。我的计划是让一些文本慢慢向下移动，并在到达屏幕的某个特定部分后，突出显示某些单词，最终文本会继续向下移动并消失以为接下来的文本腾出空间。

我的问题是，如何“链式”这些动画效果。我应该为向下移动、突出显示文本和向下移动其余部分分别设置不同的动画效果吗？然后，我应该设置延迟动画，只有前面的动画效果完成后才开始第二和第三个动画效果吗？我认为我可以创建将被链接在一起的不同动画效果，但不确定这些动画效果应该如何触发下一个动画效果开始。

- wlindner

Answer 1

有几种方法可以链接动画，其中纯CSS方式使用-webkit-animation-delay，您可以定义多个动画并告诉浏览器何时开始它们，例如：

-webkit-animation: First 1s, Second 2s;
-webkit-animation-delay: 0s, 1s;
/* or -moz etc.. instead of -webkit */

另一种方法是绑定动画结束事件，然后启动另一个动画。但我发现这种方法不太可靠。

$('#id')
  .bind('webkitAnimationEnd',function(){ Animate2() })
  .css('-webkit-animation','First 1s');

第三种方法是在Javascript中设置超时时间，并更改css动画属性。这是我最常使用的方法，因为它最灵活：您可以轻松更改时间、取消动画序列、添加新的不同动画序列，而且我从来没有像绑定transitionEnd事件那样出现过失败问题。

$('#id').css('-webkit-animation','First 1s');
window.setTimeout('Animate2("id")', 1000);
function Animate2....

在我看来，这需要的代码比绑定和CSS都要多，但它更可靠、更灵活。

- Matt H

---

太好了！我有一种感觉可能需要使用一些js，但这对我来说没问题。我会尝试第三个选项。 - wlindner

需要注意的一点是 - 如果您需要在动画序列期间检测click()事件，请改用onMouseDown()，因为某些浏览器会在完成动画序列之前触发click()，而它们中的所有浏览器似乎都能够在动画期间很好地触发onMouseDown()。 - Matt H

setTimeout 不再可靠。输入 1000 并不意味着它会在 1 秒 内执行。这意味着它至少要等待 1 秒 才能执行，之后如果有机会就会执行。这取决于事件循环中的内容。 - Loïc Faure-Lacroix

可靠性并不等于时序准确，可靠性等于执行成功。 - Matt H

你能否确定在哪些情况下 webkitAnimationEnd 事件不可靠？如果可以，能否分享一些细节？ - Telmo Marques

@TelmoMarques animationend 可能会触发，因为某些内部动画已经完成，而不是在当前元素上。 - pery mimon

Answer 2

当我在寻找与jQuery无关的方法时，我想到了链接的同样的想法，通过监听webKitanimationEnd事件，可以使用CSS进行过渡和动画的时间控制。

您可以创建一个队列数组，并将要动画化的元素添加到其中（使用一些选项，如效果和动画类型）。然后，通过在动画结束时转到下一个动画来处理此队列。这个动画可以是另一个元素，也可以是相同元素的后续动画。请记住，在动画结束时从className中删除动画类。对于每个步骤，只需添加适当的CSS类，然后在动画完成后删除它们。由于我们监听animationEnd，因此时间可以仅使用CSS完成，将处理留给JavaScript。

这是一个非常简单的任务，如果您的项目尚未使用像jQuery这样的库，那么您应该使用Vanilla JS。

我做了一些研究并设法组合出一些东西。请参见this fiddle以获取示例：

var manager = new AnimationManager();
manager.enqueue(animations).animate();

最终产品在我的github代码库上。

希望这能为您提供一些见解/帮助。

- Danillo2k

Answer 3

仅返回翻译文本：在Chrome 16中使用“正确” - 也是最普遍的方式 - 建立了一个动画链：通过在webkitAnimationEnd上触发第二个动画，使用类规则引用的关键帧定义动画-*变量，并通过将类名添加到目标元素来触发动画。这是“正确”的，因为它相对地定义了所有时间间隔，一次性完成，因为它是最灵活的（例如，每个动画可以涉及单独的元素，在一个关键帧中无法完成），并且最大化地利用CSS3。

但它失败了。通过在启动下一个动画之前删除已完成过渡的类名来修复它！

- Glenn Widener