Try   HackMD

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-startstep-end,按照關鍵影格的順序一格格進行,不會有中間的演算動畫,兩者差異在於,前者看不到第一格,後者看不到最後一格。
  • cubic-bezier(),自定義速度。

cubic-bezier 工具

CodePen:CSS SECRETS 8-1 彈動轉場