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動畫實現輪播圖
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>圖片輪換</title> <style type="text/css"> 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></head><body> <p class="p_first"> <p class="p_second"> <img src="images/011-1.jpg" alt=""><img src="images/011-2.jpg" alt=""><img src="images/011-3.jpg" alt=""><img src="images/011-1.jpg" alt=""> </p> </p></body></html>
圖片標籤要放在同一行，不然圖片之間會有空隙。
相信看了本文案例你已經掌握了方法，更多精彩請關注php中文網其它相關文章！
推薦閱讀：
css3的pointer-events使用詳解
focus-within的使用詳解
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
