Design SystemFoundationsMotion

Motion

Transition Utilities

Live DS 在 style.css 的 @layer components 內定義了一個自訂 utility .transition-normal。 其他 transition 沿用 Tailwind 預設。次數為 component implementation 真實使用頻率。

TokenSpec次數備註
.transition-normalall 150ms ease-out15Live 自訂 utility（@layer components）；預設互動 transition
transition-colorscolor/bg/border, default14Tailwind 預設；hover/focus 顏色切換
transitionTailwind 預設集合3—
transition-allall properties2—
transition-transformtransform only1—
transition-shadowshadow only1—

Interactive Demo

.TRANSITION-NORMAL (HOVER ME)

Duration & Ease (sparse)

Live 沒有 duration / ease 階梯 token，下表是 implementation 真實出現的個案。

DURATION

duration-200— 2×
duration-[400ms,400ms,400ms,400ms,400ms]— 1×

EASE

ease-linear— 1×

Keyframes

ANIMATE-SKELETON-LOADING

keyframes loading { to { translate: 100% 0; } } · 1.5s infinite

KEYFRAME REFERENCE

TokenSpec次數備註
animate-skeleton-loadingloading 1.5s infinite2Live 自訂 keyframe；skeleton shimmer

Implementation Notes

Observation only — no migration planned

本區僅記錄 audit 觀察，不對應任何 active rule 或重構計畫。

OBSERVATION

  • .transition-normal 是 Live 唯一自訂的 motion utility，覆蓋約 90% 互動需求。
  • duration / ease 沒有 scale，整個 implementation 只在 2 個檔案出現非預設值（duration-200、ease-linear 各 1–2 次）。
  • Skeleton 是唯一 keyframe 動畫。其他 animation 由元件直接使用 transition 處理。

FUTURE DIRECTION (NOT PLANNED)

Motion 層 entropy 低，無治理需求。若未來擴充：duration / ease 各 1 個 outlier 可清理，但目前不需引入階梯 token。