# 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>
---
瀏覽器支援度
![](https://i.imgur.com/PmPhwBt.png)
---
### steps(n, step position)
![](https://i.imgur.com/REHYirr.png)
---
### steps(n, step position)
![](https://i.imgur.com/pi70fox.png)
[](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。
---
有 __ 幀
![](https://i.imgur.com/wiVwOhb.png=80%)
---
有 8 幀
![](https://i.imgur.com/wiVwOhb.png=80%)
---
![](https://i.imgur.com/vRkxFb8.png)
* 圖片寬度 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>
{"metaMigratedAt":"2023-06-15T02:29:39.143Z","metaMigratedFrom":"YAML","title":"CSS 定格動畫","breaks":"true","contributors":"[{\"id\":\"0609938d-e42f-4205-8478-11ac13aa93c3\",\"add\":12291,\"del\":8251}]"}