CSS3链动画

前端之家收集整理的这篇文章主要介绍了CSS3链动画前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
我有一系列的动画,我需要对一些文本执行,我打算使用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。

原文链接:https://www.f2er.com/css/220485.html

猜你在找的CSS相关文章