意味のある動きだけを付ける

<div class="row">
  <button class="btn" type="button">保存する</button>
  <a class="link" href="#">詳しい使い方を見る</a>
</div>

<article class="card">
  <h3>カードは持ち上げすぎない</h3>
  <p>2px ほどの移動と、遠くて薄い影。これだけで触れる対象だと伝わります。大きく動かすと一覧全体が落ち着かなくなります。</p>
</article>

/* transition: all は書かない。何が動くのか読めなくなるうえ、
   意図しないプロパティまで拾って重くなる。動かす対象を名指しする。 */
.btn {
  --lift: 0;
  display: inline-flex; align-items: center; gap: 0.4rem;
  padding: 0.65rem 1.3rem;
  border: 0; border-radius: 10px;
  background: var(--accent); color: #fff;
  font: inherit; font-weight: 700; line-height: 1.7;
  cursor: pointer;
  /* 動かすのは transform と box-shadow だけ。
     left/top ではなく transform を使うと、再描画ではなく合成で済む。 */
  transform: translateY(var(--lift));
  transition: transform 0.18s ease, box-shadow 0.18s ease, background-color 0.18s ease;
  box-shadow: 0 2px 6px -2px rgba(37, 99, 235, 0.5);
}
.btn:hover { --lift: -2px; background: #1d4ed8; box-shadow: 0 12px 22px -10px rgba(37, 99, 235, 0.8); }
.btn:active { --lift: 0px; transition-duration: 0.06s; }
.btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }

/* 下線を左から伸ばす。scaleX は幅の再計算を起こさない */
.link {
  position: relative; color: var(--ink); text-decoration: none;
  font-weight: 600; line-height: 1.7;
}
.link::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: -2px;
  height: 2px; background: var(--accent);
  transform: scaleX(0); transform-origin: left;
  transition: transform 0.22s ease;
}
.link:hover::after, .link:focus-visible::after { transform: scaleX(1); }

/* カードは持ち上げるより、境界と影で「触れる」ことを示すほうが上品 */
.card {
  background: #fff; border: 1px solid var(--line);
  border-radius: 12px; padding: 1rem 1.1rem;
  transition: border-color 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease;
}
.card:hover {
  border-color: #c7d2fe;
  box-shadow: 0 18px 30px -22px rgba(27, 32, 48, 0.55);
  transform: translateY(-2px);
}

/* 動きを減らす設定では、位置の変化だけ止めて色の変化は残す。
   「押せること」の手がかりまで消さないのがコツ。 */
@media (prefers-reduced-motion: reduce) {
  .btn, .card, .link::after { transition-duration: 0.01ms; }
  .btn:hover, .card:hover { transform: none; }
}

<span class="badge">新着 4 件</span>

<div class="enter">
  <div class="row"><h3>注文が確定しました</h3><p>2 営業日以内に発送します。</p></div>
  <div class="row"><h3>在庫が補充されました</h3><p>入荷待ちだった 3 商品が購入できます。</p></div>
  <div class="row"><h3>レビューが届きました</h3><p>★4.6 の評価が付きました。</p></div>
  <div class="row"><h3>請求書を発行しました</h3><p>8 月分の明細をご確認ください。</p></div>
</div>

<p class="note">時間差は nth-child で 0.06 秒ずつずらしています。animation-fill-mode: backwards を付けているので、遅延の間も透明なまま待機します。</p>

@keyframes fade-up {
  from { opacity: 0; transform: translateY(12px); }
  to   { opacity: 1; transform: none; }
}
@keyframes fade-in {
  from { opacity: 0; }
  to   { opacity: 1; }
}
@keyframes pop {
  0%   { opacity: 0; transform: scale(0.94); }
  60%  { opacity: 1; transform: scale(1.02); }
  100% { transform: scale(1); }
}

/* backwards を付けると、遅延中も開始時の状態（透明）を保つ。
   これが無いと、遅延の間だけ要素が見えてしまう。 */
.enter > * {
  animation: fade-up 0.5s cubic-bezier(0.2, 0.8, 0.2, 1) backwards;
}
/* 時間差は nth-child でずらす。0.06s 刻みが目に自然 */
.enter > *:nth-child(1) { animation-delay: 0.00s; }
.enter > *:nth-child(2) { animation-delay: 0.06s; }
.enter > *:nth-child(3) { animation-delay: 0.12s; }
.enter > *:nth-child(4) { animation-delay: 0.18s; }

.badge { animation: pop 0.45s cubic-bezier(0.34, 1.56, 0.64, 1) 0.24s backwards; }
.note  { animation: fade-in 0.6s ease 0.3s backwards; }

@media (prefers-reduced-motion: reduce) {
  .enter > *, .badge, .note { animation: none; }
}

<div class="progress" aria-hidden="true"></div>

<div class="wrap">
  <p class="lead">下へスクロールしてください。各ブロックが視界に入るのに合わせて現れ、上部のバーが読み進めた量を示します。JavaScript は使っていません。</p>

  <div class="block reveal">
    <h3>交差の量が、そのまま進行度になる</h3>
    <p>animation-timeline: view() を書くと、要素とビューポートの交差量がアニメーションの再生位置に対応します。IntersectionObserver で閾値を管理する必要がありません。</p>
  </div>

  <div class="block reveal">
    <h3>範囲は animation-range で決める</h3>
    <p>cover 12% から cover 48% までを使う、という指定です。全域を使うと画面中央でようやく完成するので、読み物では前半で終わらせるほうが自然に感じます。</p>
  </div>

  <div class="block reveal">
    <h3>未対応環境では最初から見える</h3>
    <p>@supports で囲っているので、対応していないブラウザではアニメーションが当たらず、要素は通常どおり表示されます。内容が読めなくなることはありません。</p>
  </div>

  <div class="block reveal">
    <h3>動きを減らす設定を尊重する</h3>
    <p>prefers-reduced-motion: reduce のときはアニメーションを外し、進捗バーも止めます。動きそのものが体調に影響する人がいるため、これは装飾ではなく必須の配慮です。</p>
  </div>

  <div class="spacer"></div>
</div>

/* Scroll-driven animations。IntersectionObserver を書かずに、
   「要素がビューポートを通過する量」をアニメーションの進行度に直結できる。 */
@keyframes reveal {
  from { opacity: 0; transform: translateY(24px); }
  to   { opacity: 1; transform: none; }
}

/* 読み上げ順に影響しないよう、対応ブラウザだけに当てる。
   未対応環境では最初から見えている状態になり、内容は読める。 */
@supports (animation-timeline: view()) {
  .reveal {
    animation: reveal linear both;
    /* view() = この要素とビューポートの交差を時間軸にする */
    animation-timeline: view();
    /* 下端に入り始めてから、上に 40% 進むまでで完了させる。
       cover 20% 〜 cover 55% あたりが読み物では自然。 */
    animation-range: cover 12% cover 48%;
  }
}

/* 上部の進捗バー。scroll() は「スクロール可能な祖先」を時間軸にする */
@supports (animation-timeline: scroll()) {
  .progress {
    position: fixed; inset: 0 0 auto 0; height: 3px; z-index: 10;
    background: var(--accent); transform-origin: left;
    animation: grow linear both;
    animation-timeline: scroll(root block);
  }
  @keyframes grow { from { transform: scaleX(0); } to { transform: scaleX(1); } }
}

@media (prefers-reduced-motion: reduce) {
  .reveal { animation: none; opacity: 1; transform: none; }
  .progress { animation: none; transform: scaleX(0); }
}

<div class="marquee">
  <div class="marquee-track" aria-hidden="true">
    <span><b>受注管理</b> 注文の一覧と絞り込み</span>
    <span><b>在庫連携</b> 1時間ごとに同期</span>
    <span><b>請求書</b> 月末締めで自動生成</span>
    <span><b>権限管理</b> 編集者と閲覧者の2段階</span>
    <span><b>監査ログ</b> 90日間保持</span>
    <!-- ここから同じ並びをもう1度。translateX(-50%) で先頭に戻る -->
    <span><b>受注管理</b> 注文の一覧と絞り込み</span>
    <span><b>在庫連携</b> 1時間ごとに同期</span>
    <span><b>請求書</b> 月末締めで自動生成</span>
    <span><b>権限管理</b> 編集者と閲覧者の2段階</span>
    <span><b>監査ログ</b> 90日間保持</span>
  </div>
</div>

/* 継ぎ目を消す仕組み: 同じ並びを2回描き、
   全体の 50%（＝1周分）だけ動かして先頭へ戻す。 */
.marquee {
  overflow: hidden;
  border-block: 1px solid var(--line);
  background: #fff;
  padding: 0.7rem 0;
  /* 両端をぼかすと、切れているのではなく続いて見える */
  mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
}
.marquee-track {
  display: flex;
  gap: 2rem;
  width: max-content;
  animation: slide 22s linear infinite;
}
@keyframes slide {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}

/* 読み進めたい人のために、ホバーとフォーカスで止める */
.marquee:hover .marquee-track,
.marquee:focus-within .marquee-track { animation-play-state: paused; }

/* 無限アニメーションは電池とCPUを常に使う。
   動きを減らす設定では完全に止め、先頭だけ見せる。 */
@media (prefers-reduced-motion: reduce) {
  .marquee-track { animation: none; }
  .marquee { mask-image: none; }
}