我有一系列的动画，我需要对一些文本执行，我打算使用CSS3。我的计划是有一些文本，慢慢地向下移动到屏幕上，当它到达屏幕的某一部分，某些词将被突出显示，最终文本将继续向下移动屏幕，消失为进一步的文本留出空间。
我的问题是，什么是“链接”这些动画的最佳方式。我应该有一个动画向下移动屏幕，单独的动画突出显示文本和第三个动画向下移动屏幕的其余部分？那么，我应该设置一个动画延迟，只有一旦先前的动画完成后才启动第二和第三个动画？我认为我很好，创建单独的动画将被链接在一起，但我不知道这些动画应该如何触发下一个动画开始。
解决方法
有几种方式链接动画 – 有纯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....
它比bind更多的代码，更多的CSS，当然，但它是可靠，更灵活，imho。
