Animation CSS3链动画

我有一系列的动画需要在一些文本上执行，我计划使用CSS3。我的计划是让一些文本在屏幕上慢慢向下移动，当它到达屏幕的某个部分后，某些单词将被突出显示，最终文本将继续在屏幕上向下移动并消失，为进一步的文本腾出空间

---

我的问题是，什么是最好的方式来“链”这些动画。我应该有一个用于向下移动屏幕的动画，一个用于突出显示文本的单独动画，以及一个用于向下移动屏幕其余部分的第三个动画吗？那么，我是否应该设置动画延迟，以便在先前的动画完成后仅启动第二个和第三个动画？我认为我可以创建将链接在一起的单独动画，但我不确定这些动画应该如何触发下一个动画开始。

有几种方法链接动画-有纯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，但它更可靠、更灵活，imho。

只是在Chrome 16中使用“正确”和最通用的方式构建了一系列动画：在webkitAnimationEnd上启动第二个动画，通过从定义动画-*变量的类规则引用的关键帧定义动画，并通过将类名添加到目标元素来触发。这是“正确的”，因为它一次相对地定义了所有计时间隔，因为它是最灵活的（例如，每个动画可以包含单独的元素，这在一个关键帧内是无法做到的），并且因为它最大限度地利用CSS3

---

它失败了。通过在触发下一个转换之前删除已完成转换的类名修复了此问题

当我在寻找同样的东西时，没有使用jQuery之类的东西，我想到了同样的链接想法，听了webKitanimationEnd，就像其他人建议的那样。通过这种方式，您可以使用CSS进行过渡和动画计时

您可以创建一个数组作为队列，并将要设置动画的元素添加到其中（使用一些选项，如“效果”和“动画类型”）。然后，可以在动画结束时转到下一个动画来处理此队列。此动画可以是不同的元素，也可以是同一元素的后续动画。记住在动画结束时从

className

中删除动画类。对于每个步骤，只需添加适当的CSS类，然后在动画完成后删除它们。因为我们听的是

animationEnd

，所以计时只能用CSS完成，只剩下JavaScript处理

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

我做了一些研究，并设法把一些东西组合起来。有关示例，请参见：

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

最终产品在我的电脑上

---

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

太好了！我有一种感觉，我可能需要使用一些js，但我觉得没关系。我将尝试第三个选项。还有一件事需要注意——如果在动画序列中需要检测到click（）事件，请使用onMouseDown（）而不是click（），因为某些浏览器会在触发click（）之前完成动画序列，而所有浏览器似乎都会触发onMouseDown（）在动画过程中，一切正常。

setTimeout

并不可靠。键入

1000

并不意味着它将在

1秒内执行。这意味着它至少在
1秒之前不会被执行，在这之后，它可能会在任何时候被执行。这将取决于事件循环上的内容。可靠！=时机。Reliable==已执行。您是否能够识别
webkitAnimationEnd
事件不可靠的特定情况？如果是的话，你能分享一些细节吗？