動かす

画面に入るのは ease-out、出るのは ease-in で入りより短く。開閉や切り替えは200〜300ms。動きの基本

:root {
  --dur-base: 240ms;
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in: cubic-bezier(0.7, 0, 0.84, 0);
}
.panel { transition: opacity var(--dur-base) var(--ease-out); }

移動距離に比例させる。距離が変わらないのに時間だけ長くすると、待たされていると感じる。動きの基本

.slide {
  transition: transform calc(var(--dur-base) + 40ms * var(--distance, 1)) var(--ease-out);
}

状態が変わるきっかけがあるならトランジション。途中を指定したい、繰り返したいならアニメーション。動きの基本

.button { transition: background var(--dur-fast) var(--ease-out); }
@keyframes spin { to { transform: rotate(360deg); } }
/* 基底の .button は「出発点のCSS」にある。ここは動きを足すだけ */

left や width を動かしている。transform と opacity に替える。性能と配慮

<div class="panel">…</div>

.panel {
  transition: transform var(--dur-base) var(--ease-out),
              opacity var(--dur-base) var(--ease-out);
  /* left, width は使わない */
}

scrollイベントで毎回DOMを読んでいる。CSSのスクロール駆動アニメーションかIntersectionObserverに替える。性能と配慮

@keyframes reveal {
  from { opacity: 0; transform: translateY(1rem); }
  to { opacity: 1; transform: none; }
}
.reveal { animation: reveal linear; animation-timeline: view(); }

常時付けると層が増えてかえって重い。動く直前に付けて、終わったら外す。性能と配慮

el.addEventListener('mouseenter', () => { el.style.willChange = 'transform'; });
el.addEventListener('transitionend', () => { el.style.willChange = 'auto'; });

その動きが何を説明しているのかを一言で言えないなら、入れない。動きの設計

一言で説明できなければ入れない

40〜60msずつ遅らせる。ただし上位の数件だけ。全件に掛けると最後の要素の待ち時間が伸びる。動きの設計

.item:nth-child(1) { animation-delay: 0ms; }
.item:nth-child(2) { animation-delay: 50ms; }
.item:nth-child(3) { animation-delay: 100ms; }

display は補間できない。opacity と visibility を組み合わせるか、@starting-style を使う。動きの基本

<div class="panel is-open">…</div>

.panel {
  opacity: 0;
  visibility: hidden;
  transition: opacity var(--dur-base), visibility var(--dur-base);
}
.panel.is-open {
  opacity: 1;
  visibility: visible;
}

動くものは1つに絞る。2つ以上が同時に動くと、どちらも見られない。動きの設計

動くものは1つ。他は opacity だけ