7onicDESIGN SYSTEM

Animation

コンポーネントの出現・退出エフェクトを統一するアニメーショントークン。すべてNamed型で、トークン名がそのままクラス名（animate-{name}）に1:1マッピングされます。

Enter Animations

Checkbox・Radioの出現エフェクト。各トークンが1つのクラス（animate-checkbox-enter）に1:1マッピングされます。

opacity 0·scale 0.75→1
checkbox-enterCheckbox

チェックマークの出現アニメーション

opacity 0
+
scale 0.75 (75%)
+
duration micro (150ms)
+
easing ease-out
Tailwindanimate-checkbox-enter
opacity 0·scale 0.5→1
radio-enterRadio

ラジオドットの出現アニメーション

opacity 0
+
scale 0.50 (50%)
+
duration micro (150ms)
+
easing ease-out
Tailwindanimate-radio-enter

Scale Comparison

コンポーネントの形状に合わせたスケール値の使い分け

開始スケール
75%

Checkbox

チェックマークが枠内に収まるサイズ感で、75%の大きめスケールから自然に出現。

animate-checkbox-enter
開始スケール
50%

Radio

小さいドットを50%スケールから開始し、「ポップ」感のある印象的な出現を演出。

animate-radio-enter

Named Animations

コンポーネント固有のスタンドアロンアニメーション。各 animate-* クラス1つで完結します。

Modal

2 enter/exit pairs

Enternormal (200ms)
animate-modal-overlay-enter

オーバーレイフェードイン

Exitfast (100ms)
animate-modal-overlay-exit

オーバーレイフェードアウト

Enternormal (200ms)
animate-modal-content-enter

コンテンツ出現（opacity + scale + translateY）

Exitfast (100ms)
animate-modal-content-exit

コンテンツ退出

NavigationMenu

3 enter/exit pairs

Enternormal (200ms)
animate-fade-in

フェードイン

Exitnormal (200ms)
animate-fade-out

フェードアウト

Entermicro (150ms)
animate-nav-viewport-enter

ビューポート出現（opacity + scale + translateY）

Exitfast (100ms)
animate-nav-viewport-exit

ビューポート退出

Enternormal (200ms)
animate-collapsible-down

コラプシブル展開（height）

Exitnormal (200ms)
animate-collapsible-up

コラプシブル収縮（height）

Accordion

1 enter/exit pair

Enternormal (200ms)
animate-accordion-down

アコーディオン展開（height）

Exitnormal (200ms)
animate-accordion-up

アコーディオン収縮（height）

Drawer

画面端からのスライドイン／アウト

→
right
←
left
↑
top
↓
bottom
Enter
slow (300ms)
animate-drawer-*-enter
Exit
normal (200ms)
animate-drawer-*-exit

Tooltip

ツールチップの出現／退出（opacity + translate 4px）

↑
top
↓
bottom
→
right
←
left
Enter
micro (150ms)
animate-tooltip-*-enter
Exit
fast (100ms)
animate-tooltip-*-exit

Popover

ポップオーバーの出現／退出（opacity + translate 4px）

↑
top
↓
bottom
→
right
←
left
Enter
normal (200ms)
animate-popover-*-enter
Exit
fast (100ms)
animate-popover-*-exit

Toast

トーストのスライドイン／アウト

→
right
←
left
↑
top
↓
bottom
Enter
slow (300ms)
animate-toast-slide-*-in
Exit
normal (200ms)
animate-toast-slide-*-out

Global

無限回転（ローディングスピナー）

animate-spin

無限回転（ローディングスピナー）

spin (1000ms)

Progress

ストライプ流れアニメーション（background-position）

animate-progress-stripe

ストライプ流れアニメーション（background-position）

spin (1000ms)

Spinner

3D Y軸回転（rotateY 0→360deg）, ドット不透明度パルス（opacity 0.2→1→0.2）, バースケールパルス（scaleY 0.4→1→0.4）, 有機的形状変形＋3D回転（border-radius morph）

animate-spinner-orbit

3D Y軸回転（rotateY 0→360deg）

spin (1000ms)
animate-spinner-dot

ドット不透明度パルス（opacity 0.2→1→0.2）

spin (1000ms)
animate-spinner-bar

バースケールパルス（scaleY 0.4→1→0.4）

spin (1000ms)
animate-spinner-morph

有機的形状変形＋3D回転（border-radius morph）

spin (1000ms)

Skeleton

明暗パルス（opacity 1→0.4→1）, シマーグラデーション（translateX -100%→100%）

animate-skeleton-pulse

明暗パルス（opacity 1→0.4→1）

spin (1000ms)
animate-skeleton-wave

シマーグラデーション（translateX -100%→100%）

spin (1000ms)

Best Practices

✓

推奨

  • ✓短いduration（micro=150ms）で素早いフィードバック
  • ✓ease-outで自然な減速感を演出
  • ✓opacity+scaleの組み合わせで豊かなトランジション
  • ✓namedクラスで1:1マッピング
✕

避けるべき

  • ✗300ms+のマイクロインタラクション
  • ✗ease-inでの出現アニメーション
  • ✗ハードコードのkeyframes
  • ✗prefers-reduced-motionの無視