# CSS 定格動畫 <br> <br> yachen web camp --- ### 定格動畫 * 又名逐幀動畫，是一種動畫技術，其原理為<span class="orange">將每幀不同的圖像快速播放，因視覺暫留從而產生動畫效果</span>。 --- ### 用 CSS 做定格動畫 * 雪碧圖(Sprite) * animation --- ### 雪碧圖 將需要分別顯示的<span class="orange">多張圖像整合為單一圖像</span>，然後利用層疊樣式表分別定位顯示各部分圖的技術，以<span class="orange">減少下載圖像數量，提高網頁顯示速度</span>。 --- ### Animation * 動畫名稱 animation-name * 持續時間 animation-duration * 時間函數 animation-timing-function * 延遲時間 animation-delay * 播放次數 animation-iteration-count * 播放方向 animation-direction * 前後狀態 animation-fill-mode * 運行停止 animation-play-state --- ### Animation * <span class="gray">動畫名稱 animation-name</span> * <span class="gray">持續時間 animation-duration</span> * <span class="orange">時間函數 animation-timing-function</span> * <span class="gray">延遲時間 animation-delay</span> * <span class="gray">播放次數 animation-iteration-count</span> * <span class="gray">播放方向 animation-direction</span> * <span class="gray">前後狀態 animation-fill-mode</span> * <span class="gray">運行停止 animation-play-state</span> --- ## Timing-function * ease (預設值) * ease-in * ease-in-out * ease-out * linear * steps --- ## Timing-function * ease (預設值) * ease-in * ease-in-out * ease-out * linear * <span class="orange">steps</span> --- ## steps(n, step position) * **n**: 正整數 * **step position** * start * <span class="orange">end (預設)</span> --- 瀏覽器支援度  --- ### steps(n, step position)  --- ### steps(n, step position)  [](https://codepen.io/yachen/full/PowbBxq) --- <iframe height="439" style="width: 100%;" scrolling="no" title="PowbBxq" src="https://codepen.io/yachen/embed/PowbBxq?height=439&theme-id=default&default-tab=result" frameborder="no" allowtransparency="true" allowfullscreen="true"> See the Pen <a href='https://codepen.io/yachen/pen/PowbBxq'>PowbBxq</a> by yachen (<a href='https://codepen.io/yachen'>@yachen</a>) on <a href='https://codepen.io'>CodePen</a>. </iframe> --- ### 關鍵 * 確認圖片的 width 或 height，用來決定總共要移動多少距離。 * 確認圖片有幾幀，用來決定 steps(n)。 * 計算每一幀的 width 或 height，用來決定容器的 width 或 height。 --- 有 __ 幀  --- 有 8 幀  ---  * 圖片寬度 2880px ⇒ 圖片移動 2880px * 有 8 幀 ⇒ steps(8) * 每幀寬度 = 2880 px ÷ 8 = 360 px ⇒ 容器寬度 360px --- <iframe height="631" style="width: 100%;" scrolling="no" title="jOEMBzQ" src="https://codepen.io/yachen/embed/jOEMBzQ?height=631&theme-id=default&default-tab=result" frameborder="no" allowtransparency="true" allowfullscreen="true"> See the Pen <a href='https://codepen.io/yachen/pen/jOEMBzQ'>jOEMBzQ</a> by yachen (<a href='https://codepen.io/yachen'>@yachen</a>) on <a href='https://codepen.io'>CodePen</a>. </iframe> --- <iframe height="399" style="width: 100%;" scrolling="no" title="povERqa" src="https://codepen.io/yachen/embed/povERqa?height=399&theme-id=default&default-tab=result" frameborder="no" allowtransparency="true" allowfullscreen="true"> See the Pen <a href='https://codepen.io/yachen/pen/povERqa'>povERqa</a> by yachen (<a href='https://codepen.io/yachen'>@yachen</a>) on <a href='https://codepen.io'>CodePen</a>. </iframe> --- <iframe height="572" style="width: 100%;" scrolling="no" title="YzPGNaK" src="https://codepen.io/yachen/embed/YzPGNaK?height=572&theme-id=default&default-tab=result" frameborder="no" allowtransparency="true" allowfullscreen="true"> See the Pen <a href='https://codepen.io/yachen/pen/YzPGNaK'>YzPGNaK</a> by yachen (<a href='https://codepen.io/yachen'>@yachen</a>) on <a href='https://codepen.io'>CodePen</a>. </iframe> --- [demo-zombie](https://cdpn.io/yachen/debug/VwYmVYd/vWARwRoQgGJk) --- Thanks <!-- 參考資源： [CSS Easing Functions Level 1](https://www.w3.org/TR/css-easing-1/#step-position) [MDN-timing-function](https://developer.mozilla.org/zh-CN/docs/Web/CSS/timing-function) --> <style> .orange { color: orange; } .gray { color: gray } </style>