動畫類型詞條 4-09

關鍵影格動畫Keyframe Animation

也常叫做：關鍵影格、Keyframe、影格動畫

你可能會這樣說

想讓圖示轉半圈再進場，跟 AI 描述「一開始看不到、中途轉過來、最後停在正面」，AI 說要用關鍵影格來做。想弄懂這個詞，之後才好自己下指令。

關鍵影格（keyframe）是動畫裡的關鍵定格：你只描述「0% 長這樣、60% 變那樣、100% 停在這裡」，中間的變化由瀏覽器自動補滿。

這個概念來自動畫產業：師傅只畫關鍵畫面，助手補中間的張數，現在瀏覽器就是那個助手。

跟 AI 溝通時，直接用「百分之多少做什麼」的說法，例如「0% 透明、100% 不透明」，它就能翻成正確的關鍵影格。

opacity:0　scale:1.5

動畫起點——元件還沒登場。

opacity:1　scale:0.95

中段關鍵影格——已經顯現，微微縮過頭。

opacity:1　scale:1

結尾——停回原本大小，動畫結束。

你只描述這三個定格，中間的畫面瀏覽器自動補滿——它就是幫你補畫張數的助手。

圖 4-9　三個關鍵影格定好，中間交給瀏覽器補。

中文就可以

請用關鍵影格做一個圖示進場動畫：
1. 0% 時透明並放大到 1.5 倍。
2. 60% 時完全顯現，縮到 0.95 倍。
3. 100% 停回原本大小，全程 600 毫秒。
4. 只播放一次，結束後不要循環。