1. 程式人生 > >css3動畫實現簡單的幻燈片效果

css3動畫實現簡單的幻燈片效果

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;}
}