CSS3链动画

Question

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

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

Answer 1

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

-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，但是它是可靠且灵活的，恕我直言。