---
title: "動き"
description: "ニブルのサイトで物事がどう動くか — 慢く、静かに、そしてあまりにも頻繁にはない。"
---

## 原則

- **シンプルが美。** 18秒の単一の息よりも、3つのパルス、4つの回転、フェードアップの方が良い。
- **変形のみ。** `transform` と `opacity` をアニメーション化する。`top`、`width`、`height` の使用を避ける — これらはレイアウト作業を引き起こす。
- **`prefers-reduced-motion` を尊重。** システム内のすべてのキーフレームがメディアクエリによって制御されている。
- **ホバーで動きを得る。** 非アクティブな状態は静的である。動きは何かを行うときに起こる — カードをホバーしたり、Oracle をクリックしたりする。

## トークンリファレンス

| トークン | 値 | 使用 |
|---|---|---|
| `--nibiru-duration-fast`    | 150ms | インライントランジション（リンク、ヘアラインシフト） |
| `--nibiru-duration-normal`  | 220ms | ホバーのリフト、ボタンの変形、カードのグロー |
| `--nibiru-duration-slow`    | 400ms | モーダルパネル、オラクルの露出 |
| `--nibiru-duration-breathe` | 18s   | ヒローロットスの呼吸 |
| `--nibiru-ease-out`         | `cubic-bezier(0.2, 0.7, 0.2, 1)` | デフォルトのイージーアウト |
| `--nibiru-ease-spring`      | `cubic-bezier(0.34, 1.56, 0.64, 1)` | オラクルパネルの上昇に予約 |

## 呼吸

6ピクセルの上昇、わずかな角度の回転、約18秒間。蓮は生きているが、注目を求めていない。
```css
@keyframes atelier-breathe {
  0%, 100% { transform: translateY(0)    rotate(0deg); }
  50%      { transform: translateY(-6px) rotate(0.6deg); }
}
.atelier-hero__mark {
  animation: atelier-breathe 18s ease-in-out infinite;
}
```
## オラクルの上昇

220ミリ秒のエントリー。小さな`translateY`と`scale(0.99)`で、それが大きくなったように感じさせる、ポップしたような感じをしない。
```css
@keyframes oracle-rise {
  from { opacity: 0; transform: translateY(10px) scale(0.99); }
  to   { opacity: 1; transform: translateY(0)   scale(1); }
}
#oracle-panel.is-open {
  animation: oracle-rise 220ms cubic-bezier(0.2, 0.7, 0.2, 1);
}
```
## ホバー升

カードとプライマリーボタンは、ホバー時に1～2ピクセル上昇し、より深い影を持つ。
```css
.card {
  transition: transform 240ms var(--nibiru-ease-out),
              box-shadow  240ms var(--nibiru-ease-out),
              border-color 240ms;
}
.card:hover {
  transform: translateY(-2px);
  box-shadow: var(--nibiru-shadow-lg);
}
```
## リデュースド・モーション
```css
@media (prefers-reduced-motion: reduce) {
  .atelier-hero__mark,
  .card,
  #oracle-panel.is-open {
    animation: none;
  }
}
```
サイトはモーションをオフにしても**見えます**正しく——アニメーションは装飾であり、決して情報ではありません。

## しないでください

- パルスしないでください。オラクルは静かなインクスタンプであり、火災警報ではありません。
- 同じ要素に複数のアニメーションを組み合わせないでください。一つを選んでください。
- UIフィードバックには400ミリ秒を超えてアニメーションさせないでください。ユーザーのクリックは直感的であるべきです。
- ヒーローに対してスプリング/オーバーシュートイージングを使用しないでください。小さな「何かが到着した」瞬間のみに使用してください。
