CSS CSS3 链动画

CSS3 Chain Animations

提问by wlindner

I have a series of animations that I need to perform on some text, and I was planning on using CSS3. My plan is to have some text that slowly moves down the screen and after it gets to a certain part of the screen, certain words will be highlighted and eventually the text will continue moving down the screen and disappear making room for further text.

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

My question is, what is the best way to "chain" these animations. Should I have one animation for moving down the screen, a separate animation for highlighting the text and a third animation for moving down the rest of the screen? Then, should I set an animation delay to only start the second and third animations once the prior animations have completed? I think I'm fine with creating the separate animations that will be chained together, but I'm not sure how these animations should trigger the next animation to begin.

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

回答by Matt H

There are several ways to chain the animations - there's the pure CSS way, using -webkit-animation-delay, where you define multiple animations and tell the browser when to start them, e.g.

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

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

Another way is to bind to the animation end event, then start another. I've found this to be unreliable, though.

另一种方法是绑定到动画结束事件，然后开始另一个。不过，我发现这是不可靠的。

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

The third way is to set timeouts in Javascript and change the css animation property. This is what I use most of the time, as it is the most flexible: you can easily change the timing, cancel animation sequences, add new and different ones, and I've never had a fail issue like I have binding to the transitionEnd event.

第三种方法是在 Javascript 中设置超时并更改 css 动画属性。这是我大部分时间使用的方法，因为它最灵活：您可以轻松更改时间、取消动画序列、添加新的和不同的动画序列，而且我从未遇到过失败问题，例如绑定到 transitionEnd事件。

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

It's more code than a bind, and more than CSS, of course, but it's relable and more flexible, imho.

当然，它比绑定更多的代码，也比 CSS 更多，但它是可靠且更灵活的，恕我直言。

回答by Danillo2k

While I was looking for the same thing, without the usage of something like jQuery, I came up with the same idea of chaining, by listening to webKitanimationEnd, as suggested by others. This way you could use CSS for the transitions and for the timing of the animation.

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

You could create an array as a queue, and add the element you want to animate to it (with some options like effect and animation type). Then, you could process this queue by going to the next animation when an animation ends. This animation could be either a different element or an subsequent animation to the same element. Remember to remove the animation class from the classNamewhen the animation ends. For each step, just add the appropriate CSS classes and then remove them when the animation is finished. Because we listen to animationEnd, the timing can be done with CSS only, leaving just the processing to JavaScript.

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

This is such a minimal task that if your project isn't already using a library like jQuery, you should just use Vanilla JS.

这是一项最小的任务，如果您的项目还没有使用像 jQuery 这样的库，您应该只使用 Vanilla JS。

I did some research and managed to put something together. See this fiddlefor an example:

我做了一些研究，并设法把一些东西放在一起。有关示例，请参见此小提琴：

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

The final product is on my github repo.

最终产品在我的github repo 上。

Hope this provides you with some insight/help.

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

回答by Glenn Widener

Was just building a chain of animations in Chrome 16 using the "right" - and most general - way: firing the second animation on webkitAnimationEnd, with the animations defined by keyframes referenced from a class rule that defines the animation-* variables, and triggered by adding the class name to the target elements. This is "right" because it defines all timing intervals relatively, one time, because it's the most flexible (e.g. each animation can involve separate elements, which you can't do within one keyframe), and because it maximizes leveraging CSS3.

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

It failed. Fixed it by removing the classname of the completed transition before firing the next one!

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