跳至主要内容

[CSS] Animation 動畫

/* 哪個物件要執行動畫 */
animation: 動畫名稱 播放時間 速度函式 延遲播放時間 次數 方向 填充模式

/* 細項全名 */
animation-name: my-animation; // 動畫名稱，可以用逗號套用多個 @keyframes
animation-duration: 1s;    // 播放時間
animation-timing-function: linear | ease-in-out;  // 速度函式
animation-delay: 0.5s;  // 延遲多久開始執行
animation-iteration-count: infinite | number;    // 播放次數
animation-direction: normal | alternate (來回播放) |
                      reverse（從 100% 跑回 0 %） | alternate-reverse;   // 方向
animation-fill-mode: none | forwards | backwards | both;   // 填充模式，動畫執行前後，目標如何套用 CSS Animation
animation-play-state: paused | running;    // 定義動畫執行或停止

/* 動畫內容 */
@keyframes 動畫名稱 {
   0%{...}
   100%{...}
}

查閱所有 animation 相關屬性：Using CSS Animation @ MDN

事件（event）​

keywords: animationstart, animationend, animationiteration​
element.addEventListener('animationstart', listener, false);
element.addEventListener('animationend', listener, false);
element.addEventListener('animationiteration', listener, false);

Example Code​

See the Pen [Unit17] Animation by PJCHEN (@PJCHENder) on CodePen.

參考​