PJCHENder 未整理筆記

[CSS] Animation 動畫

2019-01-21

[CSS] Animation 動畫

@(CSS)

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
/* 哪個物件要執行動畫 */
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
1
2
3
element.addEventListener("animationstart", listener, false);
element.addEventListener("animationend", listener, false);
element.addEventListener("animationiteration", listener, false);

Example Code

CodePen

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

參考

掃描二維條碼,分享此文章