animation動畫屬性直接實現輪播的方法

這次帶給大家animation動畫屬性直接實現輪播的方法，animation動畫屬性實現輪播的注意事項有哪些，下面就是實戰案例，一起來看一下。

animation簡介：

CSS3的animation屬性可以像Flash製作動畫一樣，透過控制關鍵影格來控制動畫的每一步，實現更為複雜的動畫效果。 ainimation實現動畫效果主要由兩部分組成：

1）透過類似Flash動畫中的影格來宣告一個動畫；

2）在animation屬性中呼叫關鍵影格宣告的動畫。

animation屬性值：

animation 屬性是一個簡寫屬性

語法：animation: name duration timing-function delay iteration-count direction;

animation設定的六個動畫屬性：

animation-name：規定需要綁定到選擇器的keyframe 名稱。取值：

none：（預設）規定無動畫效果（可用於覆寫來自級聯的動畫）。

keyframename：規定需要綁定到選擇器的 keyframe 的名稱。

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

time：規定完成動畫所花費的時間。預設值是 0，意味著沒有動畫效果。

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

ease：預設。動畫以低速開始，然後加快，在結束前變慢。

linear：動畫從頭到尾的速度是相同的。

ease-in：動畫以低速開始。

ease-out：動畫以低速結束。

ease-in-out：動畫以低速開始和結束。

cubic-bezier(n,n,n,n)：在 cubic-bezier 函數中定義自己的值。可能的值是從 0 到 1 的數值。

animation-delay：規定在動畫開始之前的延遲。取值：

time：（可選）定義動畫開始前等待的時間，以秒或毫秒計。預設值是 0。

animation-iteration-count： 規定動畫應該播放的次數。取值：

n：定義動畫播放次數的數值。

infinite：規定動畫應該無限次播放。

animation-direction：規定是否應該輪流反向播放動畫。取值：

normal：預設值。動畫應該可以正常播放。

alternate：動畫應該輪流反向播放。

animation動畫實作輪播圖

nbsp;html>


    <meta>
    <title>图片轮换</title>
    <style>
        p,img{
            margin: 0;
            padding: 0;
        }
        .p_first{
            width: 1000px;
            height: 300px;
            margin-top: 100px;
            margin-left: 250px;
            overflow: hidden;
        }
        .p_second{
            width: 4000px;
            position: relative;
            animation: myimg 12s linear infinite normal; 
        }
        @keyframes myimg{
            0{
                left: 0;
            }
            5%{
                left: 0;
            }
            30%{
                left: -1000px;
            }
            35%{
                left: -1000px;
            }
            60%{
                left: -2000px;
            }
            65%{
                left: -2000px;
            }
            95%{
                left: -3000px;
            }
            100%{
                left: -3000px;
            }
        }
    </style>


    <p>
        </p><p>
            <img  src="/static/imghwm/default1.png" data-src="images/011-1.jpg" class="lazy" alt="animation動畫屬性直接實現輪播的方法" ><img  src="/static/imghwm/default1.png" data-src="images/011-2.jpg" class="lazy" alt="animation動畫屬性直接實現輪播的方法" ><img  src="/static/imghwm/default1.png" data-src="images/011-3.jpg" class="lazy" alt="animation動畫屬性直接實現輪播的方法" ><img  src="/static/imghwm/default1.png" data-src="images/011-1.jpg" class="lazy" alt="animation動畫屬性直接實現輪播的方法" >
        </p>
    

圖片標籤要放在同一行，不然圖片之間會有空隙。

相信看了本文案例你已經掌握了方法，更多精彩請關注php中文網其它相關文章！

推薦閱讀：

css3的pointer-events使用詳解

focus-within的使用詳解

#

以上是animation動畫屬性直接實現輪播的方法的詳細內容。更多資訊請關注PHP中文網其他相關文章！