利用animation屬性實作循環間的延時執行實例教程

先來介紹animation定義與用法

animation 屬性是一個簡寫屬性，用於設定六個動畫屬性：

預設值： none 0 ease 0 1 normal #

# 註解：請務必規定animation-duration 屬性，否則長度為0，就不會播放動畫了。

語法

animation-name 規定與選擇者中所綁定的 keyframe 名稱綁定。 。

animation-duration 規定完成動畫所花費的時間，以秒或毫秒計。

animation-timing-function 規定動畫的速度曲線。

animation-delay 為動畫開始前的延遲延遲。

animation-iteration-count 規定動畫應該播放的次數。 （值：n次，infinite無限循環）

animation-direction 規定是否應輪流反向播放動畫時。

總結：

依照上述屬性，只需要根據具體情況設定animation-delay和animation-iteration-count即可。

例如：

方案範例：

把總動畫設為4秒，然後前75%也就是3秒都沒變化（0- 75%），之後的25%也就是1秒做動畫就好了。

【相關推薦】

1.

詳細介紹CSS3中animation-direction屬性

2.

必須掌握的CSS3動畫（Animation ）的8大屬性

3.

分享一個監聽css3動畫（animation）結束事件實例

4.

詳解css3中兩種暫停方式（transition、animation）#

以上是利用animation屬性實作循環間的延時執行實例教程的詳細內容。更多資訊請關注PHP中文網其他相關文章！