animation(CSS)
https://www.youtube.com/watch?v=HZHHBwzmJLk
SVG SMIL animation
APNG
animation: 動畫名稱 播放時長 開始時間點 速度曲線 次數 順序 開始前結束後狀態 播放狀態
動畫名稱
required
動畫完整播放所需時間
required
預設值為0
必須大於等於0，負值無效
可使用整數或小數點
單位為秒（s）或毫秒（ms）
動畫開始的時間點
預設值為0
可設為負值
負值意味動畫立即開始，並且提早結束
由貝茲曲線（Cubic Bezier）構成的動畫速度曲線函數圖型 預設值為ease
有數個預先定義好的值
快速開始、緩慢結束
能有良好的操作反應感
緩慢開始、快速結束
操作感上會較不舒服
緩慢開始、中途加速、緩慢結束
適合用在既有元素的移動或變形時
適合用在如color、background-color、opacity等屬性的變化上
線性
通常只用在會持續移動的元素
steps(n, <jumpterm>)
動畫會在過程中的n個點上停止
每次停留的時間長度相等
jumpterm則決定停留發生的時間點
預設為jump-end
亦可自行定義貝茲曲線的數值
cubic-bezier(n1, n2, n3, n4)
值需為介於0至1之間的小數或整數
動畫播放次數
預設值為1
可設為n（正整數）或infinite
動畫播放順序
預設值為normal
正向播放
reverse
alternate
奇數次正向播放，偶數次反向播放
alternate-reverse
動畫播放開始前或結束後的狀態
預設值為none
動畫結束後，立即回至開始前的狀態
forwards
動畫結束後保持結束時的狀態
backwards
both
動畫播放狀態
預設值為running
播放
paused
running