Skip to main content

[CSS] Animation 動畫

/* 哪個物件要執行動畫 */animation: 動畫名稱 播放時間 速度函式 延遲播放時間 次數 方向 填充模式
/* 細項全名 */animation-name: my-animation; // 動畫名稱,可以用逗號套用多個 @keyframesanimation-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 Animationanimation-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.

參考#