如何方便的控制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/看下源代碼即可更深刻了解，認識。