您的位置：首页 > Web前端 > CSS

如何方便的控制css3动画开始时间点与持续时间

2015-01-27 10:05 411 查看

一般我们在控制css3animate动画时可以通过简写以减少代码量，只要在需要动画的元素上追加一下类名就可以了，如下例子

/*淡入并向上移动一点位置出现*/ .fadeInUp{ -webkit-animation:fadeInUp1000ms.8seaseboth; }
@-webkit-keyframesfadeInUp{ 0%{ opacity:0; -webkit-transform:translateY(20px); transform:translateY(20px) } 100%{ opacity:1; -webkit-transform:translateY(0); transform:translateY(0) } }

这样跟以前的相比已经算是布局精简的了。但是当一个页面中一次性有很多个元素在运行css3动画时，更糟糕的是居然都大部分的动画效果是同一个类型的但运动的时间点与持续时间不同。这时候我们为了控制不同元素的效果的开始时间点已经持续时间长度，只能复制复制再复制，然后根据需要调整一下运动的时间点与持续时间长。像下面这样：
.fadeInUp01{
-webkit-animation:fadeInUp1200ms.1seaseboth;
}

.fadeInUp03{
-webkit-animation:fadeInUp1400ms1.2seaseboth;
}
.fadeInUp04{
-webkit-animation:fadeInUp1600ms1.4seaseboth;
}
.
.
.
这样一直复制下去。。。。。

如果我们能够把动画的开始时间以及持续时间长单独抽离出来进行单独控件就好了？

于是我们想到了js

//对每一个追加CusAnimateDom类名的动画元素设置自定义属性
$(".CusAnimateDom").each(function(){
var_delay=$(this).attr("data-delay");
var_duration=$(this).attr("data-duration");
$(this).css("-webkit-animation-delay",(_delay)+"ms");
$(this).css("-webkit-animation-duration",(_duration)+"ms");
});

<imgsrc="images/load.png"class="cornerCusAnimateDomScalingAnimate"data-delay="600"data-duration="1500"lazypath="images/card/corner.png"/>

请参看http://gift.guzhongyi.com/看下源代码即可更深刻了解，认识。

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航