CSS3 @keyframes 規則

通過CSS3，我們可以創建動畫，而不必再使用JavaScript，此篇文章分享@keyframes規則，其實掌握了就會覺得它是如此的簡單。這里講一下transform與@keyframes動畫的區別：transform只執行一次，而@keyframes動畫是循環的。

我們先來看一個小例子：

<h4>Hello World</h4>

h4{
    animation: color 2s infinite alternate; /*名字 時間 無限循環 輪流反向播放*/
}
@keyframes color{
    from{
        color:#f00;
    }
    to{
        color: #0f0;
    }
}

這個效果就是紅色和綠色顏色漸變切換，我們來分析一下上面的代碼：

首先寫好要動畫的元素，然后@keyframes來創建動畫，后面跟着動畫名字，from里面放的是動畫開始（0%）的樣式，to里面放的是動畫結束（100%）的樣式，然后把動畫綁定到選擇器，這里有幾個選項下面依次來介紹：

 

• animation-name：規定 @keyframes 動畫的名稱
• animation-duration：規定動畫完成一個周期所花費的秒或毫秒。默認是 0
• animation-timing-function：規定動畫的速度曲線。默認是 "ease"
• animation-delay：規定動畫何時開始。默認是 0
• animation-iteration-count：規定動畫被播放的次數。默認是 1
• animation-direction：規定動畫是否在下一周期逆向地播放。默認是 "normal"
• animation-play-state：規定動畫是否正在運行或暫停。默認是 "running"
• animation-fill-mode：規定對象動畫時間之外的狀態

 

而我上面寫的 animation: color 2s infinite alternate; 是簡寫形式：

h4{
    animation: color 2s infinite alternate;
}
/* 相當於 */
h4{
    animation-name: color;
    animation-duration: 2s;
    animation-iteration-count: infinite;
    animation-direction: alternate;
}

 

下面我們來看一個箭頭上下移動的例子（結合transform）：

<span class="box"><i class="arrow"></i></span>

.arrow{
    display: inline-block;
    width:20px;
    height:20px;
    border-left:2px #f60 solid;
    border-bottom:2px #f60 solid;
    transform: rotate(-45deg);
}
.box{
    display: inline-block;
    animation: triangle 2s infinite; /* 名字，時長，循環執行的次數 */
}
@keyframes triangle{
    0%{
        transform: translate(0, 0);
    }
    50%{
        transform: translate(0, 10px);
    }
    100%{
        transform: translate(0, 0);
    }
}

 還要注意一點transform是css3的屬性，前面要加前綴，諸如-o-、-moz-等，@keyframes也是。