CSS3链动画 [英] CSS3 Chain Animations

问题描述

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

我的问题是，什么是链接这些动画的最好方法。我应该有一个动画向下移动屏幕，单独的动画突出显示文本和第三个动画向下移动屏幕的其余部分？那么，我应该设置动画延迟，只有一旦先前的动画完成后才启动第二和第三个动画？我想我可以创建单独的动画，链接在一起，但我不知道这些动画应该如何触发下一个动画开始。

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

  -webkit-animation：First 1s，Second 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）; 
 function Animate2 .... 
  

它比bind更多的代码， ，当然，但它是可靠，更灵活，imho。

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屋！