css3動畫實現簡單的幻燈片效果
阿新 • • 發佈：2018-12-13
css3 Animation屬性
css3的animation屬性可以像Flash製作動畫一樣，通過關鍵幀控制動畫的每一步，實現複雜的動畫效果。@keyframes規則是建立動畫。 @keyframes規則內指定一個CSS樣式和動畫將逐步從目前的樣式更改為新的樣式。
css3Animation屬性詳解
| 屬性 | 描述 | 引數 |
| animation | 所有動畫屬性的簡寫屬性，除了 animation-play-state 屬性。 | |
| animation-name | 指定 @keyframes 動畫的名稱。 | 動畫名稱自己起，與@keyframes規則名稱相對應 |
| animation-duration | 指定動畫完成一個週期所花費的秒或毫秒。預設是 0。 | 數值n |
| animation-timing-function | 指定動畫的速度曲線。預設是 "ease"。 | linear：動畫從頭到尾的速度是相同的。 ease：動畫以低速開始，然後加快，在結束前變慢。 ease-in：動畫以低速開始。 ease-out：動畫以低速結束。 ease-in-out：動畫以低速開始和結束。 cubic-bezier(n,n,n,n)：在 cubic-bezier 函式中自己的值。可能的值是從 0 到 1 的數值。 |
| animation-fill-mode | 指定當動畫不播放時（當動畫完成時，或當動畫有一個延遲未開始播放時），要應用到元素的樣式。 | none：動畫在動畫執行之前和之後不會應用任何樣式到目標元素。 forwards：應用最後關鍵幀的樣式 backwards：應用初始幀的樣式 both：動畫遵循 forwards 和 backwards 的規則。也就是說，動畫會在兩個方向上擴充套件動畫屬性。
|
| animation-delay | 指定動畫何時開始。預設是 0。 | 數值n |
| animation-iteration-count | 指定動畫被播放的次數。預設是 1。 | 數值n: 一個數字，定義應該播放多少次動畫 infinite：指定動畫應該播放無限次 |
| animation-direction | 指定動畫是否在下一週期逆向地播放。預設是 "normal"。 | normal：動畫按正常播放。 reverse：動畫反向播放。 alternate：動畫在奇數次（1、3、5...）正向播放，在偶數次（2、4、6...）反向播放。 alternate-reverse：動畫在奇數次（1、3、5...）反向播放，在偶數次（2、4、6...）正向播放。 |
| animation-play-state | 指定動畫是否正在執行或暫停。預設是 "running"。 | paused：暫停動畫 running：執行動畫 |
利用Animation屬性實現一個簡單的幻燈片切換效果
原理是通過animate的關鍵幀來切換元素的背景圖片即可達到幻燈片切換效果
<body>
<div class="banner">
</div>
</body>.banner {
width: 480px;
height: 320px;
margin: 150px auto;
overflow: hidden;
background-size: cover;
background-position: center;
animation-name: "banner"; // 動畫名稱
animation-duration: 20s; // 播放動畫所需時間
animation-timing-function: linear; // 播放動畫的速度
animation-iteration-count: infinite; // 動畫播放次數
}
@-webkit-keyframes 'banner' {
0% {background: url('images/1.jpg') no-repeat;}
25% {background: url('images/2.jpg') no-repeat;}
50% {background: url('images/3.jpg') no-repeat;}
75% {background: url('images/4.jpg') no-repeat;}
100% {background: url('images/5.jpg') no-repeat;}
}