時間刻度
五個標準時長，每個對應不同的使用情境。
150ms
MICRO
微互動：按鈕 hover、標籤切換、圖示回饋
ease-out
500ms
ELEMENT
元件進場：卡片、圖片、區塊滑入
ease-in-out
700ms
TRANSITION
頁面轉場：路由切換、Modal 開關
ease-in-out
1000ms
HERO
Hero 大圖動畫：主視覺文字淡入、封面揭示
ease-out
1200ms
COUNT
數字計數：碳足跡數據、驗證統計揭示
ease-out
五種核心動畫模式
01 — Fade + Slide Up
元件從下方 24px 淡入並上移到定位。最基本的進場方式，用於卡片、段落、圖片。
點擊播放
opacity: 0→1 translateY: 24px→0 500ms ease-out
02 — Scale Reveal
圖片或卡片從 95% 縮放展開至 100% 同時淡入。用於 Hero 圖片載入、產品大圖揭示。
點擊播放
opacity: 0→1 scale: 0.95→1 500ms ease-out
03 — Honey Drip
Primary Button 專用。Hover 時背景色從底部往上「填充」，模擬蜂蜜緩慢流入的感覺。使用物理重量感 easing（cubic-bezier 0.23, 1, 0.32, 1）。
height: 0→100% 400ms cubic-bezier(0.23, 1, 0.32, 1) transform-origin: bottom
04 — Stagger
多個元件依序進場，每項間隔 100ms。製造視覺節奏，避免所有東西同時出現的呆板感。
蜂農故事
零碳驗證
地方創生
delay: 0ms, 100ms, 200ms... each: 400ms ease-out
05 — Parallax Scroll
Hero 背景圖捲動速度慢於前景文字（背景 0.5× 速度），製造景深感。強化電影感，用於地景大圖區塊。
background-attachment: scroll transform: translateY(scrollY * 0.5)
動畫使用原則
👁
不自動播放
進入視窗或載入完成後才觸發。不在用戶未注意到的地方默默播放。
♿
尊重使用者設定
系統設定
prefers-reduced-motion 的用戶，所有動畫降為 fade-only 或直接關閉。∞
∞ 圖標動畫
沿 ∞ 路徑的描邊動畫，只用於品牌載入頁。不常態出現，出現時要有重量感。