# CSS SECRETS 筆記 - Ch8 轉場和動畫
###### tags: `CSS SECRETS` `css`
[竹白記事本](https://chupainotebook.blogspot.com/)，學習紀錄，2019/03/18。

>[CSS Secrets](https://www.oreilly.com/library/view/css-secrets/9781449372736/?utm_medium=referral&utm_campaign=publisher&utm_source=oreilly&utm_content=buybox)
[CSS 秘密花園](https://www.w3cplus.com/blog/tags/502.html)

## [目錄 CSS SECRETS 筆記](https://hackmd.io/s/HyrK1S1YN)
Ch8 轉場和動畫
1. 彈動轉場
2. 逐格動畫
3. 閃爍
4. 打字連動
5. 順暢狀態動畫
6. 繞著圓形路徑的動畫

## 8-1 彈動轉場
[**`animation-timing-function`**](https://developer.mozilla.org/zh-CN/docs/Web/CSS/animation-timing-function)
- `ease`，平滑播放（逐漸變慢）。
- `ease-in`，慢到快（加速）。
- `ease-out`，快到慢（減速）。
- `ease-in-out`，慢到快再到慢（先加速後再減速）。
- `linear`，線性播放（等速）。
- `step-start`、`step-end`，按照關鍵影格的順序一格格進行，不會有中間的演算動畫，兩者差異在於，前者看不到第一格，後者看不到最後一格。
- `cubic-bezier()`，自定義速度。

>[cubic-bezier 工具](http://cubic-bezier.com/)

>**CodePen：**[CSS SECRETS 8-1 彈動轉場](https://codepen.io/CHUPAIWANG/pen/NJzdgR)