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

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

/*淡入并向上移动一点位置出现*/
.fadeInUp{
    -webkit-animation:fadeInUp 1000ms .8s ease both;
}

@-webkit-keyframes fadeInUp {
	0% {
		opacity: 0;
		-webkit-transform: translateY(20px);
		transform: translateY(20px)
	}

	100% {
		opacity: 1;
		-webkit-transform: translateY(0);
		transform: translateY(0)
	}
}

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

.fadeInUp01{
    -webkit-animation:fadeInUp 1200ms .1s ease both;
}

.fadeInUp03{
    -webkit-animation:fadeInUp 1400ms 1.2s ease both;
}
.fadeInUp04{
    -webkit-animation:fadeInUp 1600ms 1.4s ease both;
}
.
.
.

这样一直复制下去。。。。。

 

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

于是我们想到了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");
        });

 

<img src="images/load.png" class="corner CusAnimateDom ScalingAnimate" data-delay="600" data-duration="1500" lazypath="images/card/corner.png" />

 

 

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