首頁  >  文章  >  web前端  >  利用animation屬性實作循環間的延時執行實例教程

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

零下一度
零下一度原創
2017-05-18 14:37:383408瀏覽

先來介紹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. 

必須掌握的CSS3動畫(Animation )的8大屬性

3. 

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

4. 

詳解css3中兩種暫停方式(transition、animation)#

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

陳述:
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn