iT邦幫忙

2021 iThome 鐵人賽

DAY 6
0
Modern Web

動起來吧!Web Motion 動態特效網頁學習日記系列 第 6

認識 CSS animation 與他的孩子們 (一)

keyframes 定義關鍵影格的各自狀態,不同關鍵影格組成動態變化,但我們在定義keyframes時,使用的是from / to 或0%~100%之間,少了一個相當重要的元素「時間」,在CSS的世界中,是在要使用的網頁元件上時,提供此動態的時間數值。

因此,最單純的animation的使用方式就是放入好朋友keyframes的名字,和不可或缺的時間:

.my-div{
animation: my-animation 3s;
}

@keyframes my-animation{
  0%{
      opacity:0;
    }
  100%{
      opacity:1;
    }
}

剛剛內容也可以用子屬性animation-name和animation-duration改寫:

.my-div{
animation-name: my-animation;
animation-duration: 3s;
}

備註:若要同時使用多個定義好的keyframes,使用逗點隔開即可同時使用。


animation屬性包含了多個子屬性(sub-properties),除了name和duration外,還有以下項目可以依照需求進行設定:

  • animation-timing-function:定義變化的速率,預設值為linear(平均速率變化),另外可以使用step、cubic-bezier和定義好的ease/ease-in/ease-out/ease-in-out。
  • animation-delay:定義網頁元件讀取完畢後,動畫開始的間隔時間,用於產生延遲效果。
  • animation-iteration-count:設定動畫的重複次數,使用「infinite」即可達成重複播放。
  • animation-direction:定義動畫播放完畢後是否需反向播放。共有normal、reverse、alternate、alternate-reverse四個值可以設定。
  • animation-fill-mode:定義元素在動畫播放外的狀態。共有none、forwards、backwards、both四個值可以設定。
  • animation-play-state:控制動畫的播放狀態。有 pause 和 running 兩個值,預設為running。

除了使用子屬性外,也可全部寫在 animation 中:

animation: name duration timing-function delay iteration-count direction fill-mode play-state;

備註:name 和 duration 為必要值。


上一篇
CSS就可以!animation 與他的好夥伴 @keyframes
下一篇
認識 CSS animation 與他的孩子們 (二)
系列文
動起來吧!Web Motion 動態特效網頁學習日記30

尚未有邦友留言

立即登入留言