Question

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

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

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，但它更加灵活，更加灵活，非常好。

Answer 2

虽然我一直在寻找相同的东西，但没有使用像jQuery这样的东西，我通过听别人的建议，听取了webKitanimationEnd，想出了相同的链接概念。这样您就可以使用CSS进行过渡和动画的计时。

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

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

我做了一些研究并设法把东西放在一起。有关示例，请参阅this fiddle：

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

最终产品位于我的github repo。

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

Answer 3

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

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

CSS3链动画

3 个答案: