CSS3 链动画 [英] CSS3 Chain Animations

问题描述

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

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

解决方案

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

-webkit-animation:第一个1s，第二个2s；-webkit-animation-delay: 0s, 1s;/* 或 -moz 等.. 而不是 -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);功能 Animate2....

当然，它比绑定更像是代码，也比 CSS 更重要，但它可靠且更灵活，恕我直言.

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.

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.

解决方案

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.

-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.

$('#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.

这篇关于CSS3 链动画的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！