transition通過事件來觸發動畫效果，所以它本身就存在很多局限性。如果我希望動畫效果能夠自動執行怎么辦？這就需要 用到css3的另一個重要 的屬性——animation <br/> ### 關鍵幀 說到animation就不得不說一下關鍵幀(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)} } ~~~ 上述代碼創建了一個名字為around的關鍵幀，它指定了動畫(時間)在 0%，25%，50%，75%，100%的位置分別為左上，右上，右下，左下，左上(假設div的寬高為180px)。 <br> ### animation #### 調用動畫——animation：關鍵幀的動畫名稱 #### animation-duration：設置動畫完成時間 單位：秒或毫秒 <br> #### animation-timing-function：過渡函數 參數同transition-timing-function <br> #### animation-delay：延遲時間 單位：秒或毫秒 <br> #### animation-iteraction-count：指定動畫的播放次數(默認播放一次) 1.n：播放n次 2.infinite：播放無限次 <br> #### animation-direction：指定播放方向 1.normal：默認值，每次循環都是正序播放 2.alternate：偶數次循環使反方向播放 <br> #### animation-fill-mode：指定動畫的開始、結束樣式 1.none：默認動畫結束后返回到0%幀的樣式 2.forwards：動畫結束后停留在最后的幀的樣式 3.backwards：在準備執行動畫之前讓元素迅速應用動畫初始幀的樣式 (比如元素透明度為1，0%的樣式為透明度為0，在開始動畫之前元素的透明度已經是0了，否則就會出現先變為0后開始執行動畫的情況) 4.both：forwards+backwards <br/> animation的前四個屬性是必須的。 也可以把這些屬性寫到一起 ~~~ div span{ display:inline-block; width:20px; height:20px; background:red; border-radius:10px; animation:around 10s ease 1s infinite backwards; } ~~~ 最終的動畫效果：小球從左上角由快到慢到達右上角，再由快到慢到達右下角，再由快到慢到達左下角，最后回到原點并且一直循環下去。 過渡函數會作用的每一幀上，也就是每一幀到達下一幀的動畫都是由快到慢。 <br/> animation和@keyframes也要寫css hack，關鍵幀的前綴寫在@和keyframes之間：@-webkit-keyframes{...}