CSS3 链式动画

Posted 2023-03-06

【中文标题】CSS3 链式动画

【英文标题】：CSS3 Chain Animations

【发布时间】：2011-12-11 03:35:04

【问题描述】：

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

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

【参考方案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 更多，但它更可靠，更灵活，恕我直言。

【讨论】：

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

还有一点需要注意 - 如果您需要在动画序列期间检测 click() 事件，请使用 onMouseDown() 而不是 click()，因为某些浏览器会在触发之前完成动画序列click()，而它们似乎都在动画期间触发了 onMouseDown()。

setTimeout 并不可靠。输入1000 并不意味着它将在1 second 中执行。这意味着它至少在1 second 之前不会被执行，之后它可能会在任何时候被执行。这取决于事件循环中的内容。

可靠！=时机。可靠 == 执行。

您是否能够确定webkitAnimationEnd 事件不可靠的具体情况？如果是这样，你能分享一些细节吗？

【参考方案2】：

当我在寻找同样的东西时，没有使用像 jQuery 这样的东西，我通过听 webKitanimationEnd 提出了相同的链接想法，正如其他人所建议的那样。这样您就可以将 CSS 用于过渡和动画的计时。

你可以创建一个数组作为队列，然后添加你想要动画的元素（带有一些选项，如效果和动画类型）。然后，您可以通过在动画结束时转到下一个动画来处理此队列。该动画可以是不同的元素，也可以是同一元素的后续动画。请记住在动画结束时从className 中删除动画类。对于每一步，只需添加适当的 CSS 类，然后在动画完成时将其删除。因为我们听animationEnd，所以只能用CSS来计时，只剩下JavaScript处理了。

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

我做了一些研究并设法将一些东西放在一起。示例见this fiddle：

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

最终产品在我的github repo。

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

【参考方案3】：

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

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