transition通過事件來觸發(fā)動畫效果，所以它本身就存在很多局限性。如果我希望動畫效果能夠自動執(zhí)行怎么辦？這就需要 用到css3的另一個重要 的屬性——animation

關(guān)鍵幀

說到animation就不得不說一下關(guān)鍵幀(keyframes)，它指定了動畫在不同時間段的樣式。

@keyframes around{
     0%{transform:translateX(0);}
     25%{transform:translateX(180px);}
     50%{transform:translate(180px,180px);}
     75%{transform:translate(0,180px);}
     100%{transform:translateY(0)}
}

上述代碼創(chuàng)建了一個名字為around的關(guān)鍵幀，它指定了動畫(時間)在
0%，25%，50%，75%，100%的位置分別為左上，右上，右下，左下，左上(假設(shè)div的寬高為180px)。

animation

調(diào)用動畫——animation：關(guān)鍵幀的動畫名稱

animation-duration：設(shè)置動畫完成時間

單位：秒或毫秒

animation-timing-function：過渡函數(shù)

參數(shù)同transition-timing-function

animation-delay：延遲時間

單位：秒或毫秒

animation-iteraction-count：指定動畫的播放次數(shù)(默認(rèn)播放一次)

1.n：播放n次
2.infinite：播放無限次

animation-direction：指定播放方向

1.normal：默認(rèn)值，每次循環(huán)都是正序播放
2.alternate：偶數(shù)次循環(huán)使反方向播放

animation-fill-mode：指定動畫的開始、結(jié)束樣式

1.none：默認(rèn)動畫結(jié)束后返回到0%幀的樣式
2.forwards：動畫結(jié)束后停留在最后的幀的樣式
3.backwards：在準(zhǔn)備執(zhí)行動畫之前讓元素迅速應(yīng)用動畫初始幀的樣式
(比如元素透明度為1，0%的樣式為透明度為0，在開始動畫之前元素的透明度已經(jīng)是0了，否則就會出現(xiàn)先變?yōu)?后開始執(zhí)行動畫的情況)
4.both：forwards+backwards


animation的前四個屬性是必須的。

也可以把這些屬性寫到一起

div span{
   display:inline-block;
   width:20px;
   height:20px;
   background:red;
   border-radius:10px;
   animation:around 10s ease 1s infinite backwards;
}

最終的動畫效果：小球從左上角由快到慢到達(dá)右上角，再由快到慢到達(dá)右下角，再由快到慢到達(dá)左下角，最后回到原點并且一直循環(huán)下去。
過渡函數(shù)會作用的每一幀上，也就是每一幀到達(dá)下一幀的動畫都是由快到慢。

animation和@keyframes也要寫css hack，關(guān)鍵幀的前綴寫在@和keyframes之間：@-webkit-keyframes{...}