先來介紹animation定義與用法
animation 屬性是一個簡寫屬性,用於設定六個動畫屬性:
animation-name animation-duration animation-timing-function animation-delay animation-iteration-count animation-direction
預設值: none 0 ease 0 1 normal #
# 註解:請務必規定animation-duration 屬性,否則長度為0,就不會播放動畫了。 語法animation: name duration timing-function delay iteration-count direction;animation-name 規定與選擇者中所綁定的 keyframe 名稱綁定。 。 animation-duration 規定完成動畫所花費的時間,以秒或毫秒計。 animation-timing-function 規定動畫的速度曲線。 animation-delay 為動畫開始前的延遲延遲。 animation-iteration-count 規定動畫應該播放的次數。 (值:n次,infinite無限循環) animation-direction 規定是否應輪流反向播放動畫時。 總結: 依照上述屬性,只需要根據具體情況設定animation-delay和animation-iteration-count即可。 例如:
p { animation:mymove 5s 5s infinite; -webkit-animation:mymove 5s 5s infinite; /* Safari 和 Chrome */ }方案範例:
<!doctype html><html lang="en"><head> <meta charset="UTF-8"> <title>Document</title> <style> .item1{ list-style: none; -webkit-animation: revolving 4s 0s infinite; animation: revolving 4s 0s infinite; } @-webkit-keyframes revolving{ 0,75%{ -webkit-transform: perspective(700px) rotateX(90deg); } 87.5%{ -webkit-transform: perspective(700px) rotateX(0deg); } 100%{ -webkit-transform: perspective(700px) rotateX(-90deg); } } </style> </head> <body> <ul> <li class="item1">梅西与美洲杯失之交臂</li> </ul> </body> </html>把總動畫設為4秒,然後前75%也就是3秒都沒變化(0- 75%),之後的25%也就是1秒做動畫就好了。 【相關推薦】1.
詳細介紹CSS3中animation-direction屬性
2. 3. 4.詳解css3中兩種暫停方式(transition、animation)#
以上是利用animation屬性實作循環間的延時執行實例教程的詳細內容。更多資訊請關注PHP中文網其他相關文章!