### css3動畫-- animation > #### 用于設置動畫屬性，它是一個簡寫，包含6個屬性。 > 1.和transition 過渡動畫不一樣的時，他可以設置多個節點。每個節點有不同的動畫效果。 > 2.也可以頁面一打開就直接執行。 > 3.和transition 類似的點，都是執行后會回到最初的位置。 > #### 語法 ~~~ /*動畫名稱 動畫時間 運動曲線 何時開始 播放次數 是否反方向*/ animation:name duration timing-function delay iteration-count direction play-state fill-mode; /*無限循環播放*/ animation-iteration-count:infinite; /* 暫停動畫*/ animation-play-state:paused; ~~~ > #### 屬性 * `@keyframes:`定義動畫； * `animation:`所有動畫屬性的簡寫屬性，除了`animation-play-state`屬性； * `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:`規定動畫在播放之前或之后，其動畫效果是否可見。 >#### 逐幀動畫 ~~~ <div class="ani"></div> <style> .ani { width: 280px; height: 280px; background: url(...) 0 0 no-repeat; background-size: auto 100%; margin: 0 auto; animation: ani 1.2s linear infinite; animation-timing-function: steps(幀數, end); } @keyframes ani { 0% { background-position: 0 0; } 100% { background-position: -(幀數\*寬度) 0; } } </style> ~~~