CSS SECRETS 筆記 - Ch8 轉場和動畫

tags: CSS SECRETS css

竹白記事本，學習紀錄，2019/03/18。

CSS Secrets
CSS 秘密花園

目錄 CSS SECRETS 筆記

Ch8 轉場和動畫

1. 彈動轉場
2. 逐格動畫
3. 閃爍
4. 打字連動
5. 順暢狀態動畫
6. 繞著圓形路徑的動畫

8-1 彈動轉場

animation-timing-function

• ease，平滑播放（逐漸變慢）。
• ease-in，慢到快（加速）。
• ease-out，快到慢（減速）。
• ease-in-out，慢到快再到慢（先加速後再減速）。
• linear，線性播放（等速）。
• step-start、step-end，按照關鍵影格的順序一格格進行，不會有中間的演算動畫，兩者差異在於，前者看不到第一格，後者看不到最後一格。
• cubic-bezier()，自定義速度。

cubic-bezier 工具

CodePen：CSS SECRETS 8-1 彈動轉場