CSS3连锁动画

我有一系列动画需要在某些文本上执行，而且我计划使用CSS3。我的计划是让一些文本缓慢地沿着屏幕向下移动，并且在屏幕到达屏幕的某个部分后，某些文字将会突出显示，最终文本将继续向下移动，并且消失，为进一步的文本腾出空间。CSS3连锁动画

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

来源

2011-10-19 wlindner

有几种链接动画的方法 - 有纯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....

它比绑定更多的代码，当然，它比CSS更多，但它更可靠，更灵活。

来源

2011-10-19 21:09:49

太棒了！我有一种感觉，我可能需要使用一些js，但这对我来说很好。我会尝试第三个选项。 – wlindner

还有一点需要注意 - 如果您需要在动画序列中检测click（）事件，请使用onMouseDown（）而不是click（），因为有些浏览器会在点击click（）之前完成动画序列，而所有他们似乎在动画期间触发onMouseDown（）就好了。 –

太好了，我会试试看。 – wlindner

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

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

来源

2012-02-10 17:44:59

虽然我在寻找同样的东西，但没有使用类似jQuery的东西，我想出了相同的链接思路，通过听别人建议的webKitanimationEnd。通过这种方式，您可以将CSS用于转换和动画的时间安排。

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

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

我做了一些研究，并设法把东西放在一起。一个例子见this fiddle：

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

最终产品是我github repo。

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

来源

2013-12-19 09:07:17 Danillo2k

回答

相关问题