我們使用CSS3可以實(shí)現(xiàn)動(dòng)畫(huà)，主要的方式是通過(guò)animation 實(shí)現(xiàn)的。

animation屬性

• animation-name ：動(dòng)畫(huà)的名稱
• animation-duration：設(shè)置動(dòng)畫(huà)時(shí)間
• animation-iteration-count：設(shè)置動(dòng)畫(huà)次數(shù)，其中有一個(gè)屬性infinite為無(wú)限循環(huán)
• animation-direction：設(shè)置動(dòng)畫(huà)是否應(yīng)該反向，默認(rèn)正常播放，默認(rèn)值為normal，如果值為'alternate'時(shí)動(dòng)畫(huà)會(huì)在奇數(shù)次數(shù)正常播放
• animation-delay：設(shè)置動(dòng)畫(huà)延時(shí)，當(dāng)要用到幾個(gè)動(dòng)畫(huà)的先后順序時(shí)，可以使用
• animation-timing-function： 設(shè)置動(dòng)畫(huà)結(jié)束的時(shí)候應(yīng)用最后一幀的動(dòng)畫(huà)，linear線性過(guò)渡。ease平滑過(guò)渡。ease-in由慢到快。ease-out由快到慢
• animation-fill-mode：none默認(rèn)值。forwords設(shè)置對(duì)象狀態(tài)為動(dòng)畫(huà)結(jié)束時(shí)的狀態(tài)。backwards設(shè)置狀態(tài)為動(dòng)畫(huà)開(kāi)始時(shí)的狀態(tài)。both設(shè)置對(duì)象為動(dòng)畫(huà)結(jié)束或開(kāi)始時(shí)的狀態(tài)
• animation-play-state：設(shè)置動(dòng)畫(huà)的暫停與播放，running運(yùn)動(dòng)，paused暫停

那么這樣說(shuō)吧，我們不是要用到動(dòng)畫(huà)嗎？那么動(dòng)畫(huà)的使用要在該元素中設(shè)置一個(gè)animation，而具體的動(dòng)畫(huà)操作我們需要用到@keyframes

例：

@keyframes changeColor{
    0%{
              background:blue;
        }
    50%{
        background: red;
    }
    100%{
                background:yellow;
    }

.box{
        animation: changeColor 2s infinite;
}

這樣的話顏色的變化可能不是很明顯，不過(guò)這樣的話我們可以加上一個(gè)屬性：

transition: all .8s;