JSなしのアニメーション：CSSはすでにすべてを知っています

つい最近まで、「スクロール表示」や「画面間の移動」は、イベントハンドラとJSコードの山を意味していました。現在、ブラウザエンジンはレンダリングを引き受けており、私たちはCSSで意図を記述しています。利点：依存関係が少なく、コンポーザーレベルの滑らかさ、より明確なパフォーマンス制限。

🚀 Scroll-linked animations: @scroll-timeline

アニメーションの進行状況をスクロールに関連付けます。ブラウザ自体が「タイムライン」を提供します。それにキーフレームを関連付けるだけです。

@scroll-timeline fade-tl {
  source: auto;               /* ближайший скроллируемый контейнер */
  orientation: block;         /* по оси прокрутки */
  scroll-offsets: 0%, 100%;   /* начало/конец */
}

.section__item{
  animation: fade-in 1s both linear;
  animation-timeline: fade-tl;        /* ← магия */
  animation-range: entry 0% cover 60%;/* когда и как играться */
}

@keyframes fade-in {
  from { opacity: 0; transform: translateY(24px); }
  to   { opacity: 1; transform: translateY(0); }
}

使用場所： カードの表示、視差、読み取りの進行状況バー、セクションのスティッキーヘッダー。

🔁ビュー トランジション API — 状態間の「グラデーション」

手動同期なしのページ/状態間のネイティブ遷移。JSはトランザクションを開始し、CSSはそれをフォーマットします。

/* CSS */
::view-transition-old(root),
::view-transition-new(root){
  animation: fade .35s ease;
}

@keyframes fade {
  from { opacity: .001 }
  to   { opacity: 1 }
}

/* JS (одна строка в обработчике) */
// document.startViewTransition(() => router.navigate('/about'));

チップ: view-transition-name を使用して要素に名前を付け、特定のブロック（ヒーロー画像、タイトル）の「フライト」を実行できます。

📦コンテナクエリ+アニメーション

コンポーネントは、ビューポート全体ではなく、親の幅/高さに反応します。領域を変更するときにカードをスムーズに「再構築」できます。

.card{
  container-type: inline-size; /* объявили контейнер */
}

@container (min-width: 520px){
  .card__media{ inline-size: 280px }
  .card__body{ animation: grow .4s ease }
}

@keyframes grow{
  from{ transform: scale(.96) }
  to  { transform: scale(1) }
}

🧲 JSなしの:has()ステータスセレクター

親要素の状態/子要素の存在に対する反応は、アニメーションのトリガーです。

.accordion:has(input:checked) .accordion__panel{
  grid-template-rows: 1fr;          /* раскрываем */
  transition: grid-template-rows .3s ease;
}
.accordion:not(:has(input:checked)) .accordion__panel{
  grid-template-rows: 0fr;          /* скрываем */
}
.card:has(:hover){ transform: rotate(1.5deg) scale(1.03); transition:.25s }

🧩 個別のtransformプロパティとアニメーションの構成

「大きな」変換の代わりに、独立した変換、スケール、回転が利用可能です。animation-compositionプロパティを使用すると、効果を追加できます。

.chip{
  translate: 0 8px;        /* читаемее и безопаснее */
  rotate: 1deg;
  transition: translate .25s ease, rotate .25s ease;
}
.chip:hover{ translate: 0 0; rotate: 0deg }

.pulse{ animation: pulse 1.2s infinite ease; }
.float{ animation: float 3s infinite ease alternate; }
.pulse, .float{ animation-composition: add; } /* суммируем эффекты */

@keyframes pulse{ from{scale:1} 50%{scale:1.04} to{scale:1} }
@keyframes float{ from{translate:0 0} to{translate:0 -8px} }

📊 変更前/変更後

CSSは、ほとんどのインターフェースアニメーションが宣言的に作成され、より高速に動作するレベルに成長しました。@scroll-timeline、View Transitions、:has()、Container Queries、個別のtransformプロパティを使用し、レンダリングではなくロジックが必要な場所にJSを残します。

📚 このテーマについてもっと詳しく知りたいですか？

アプリで コディック さまざまなテーマの詳細なレッスン、ステップバイステップの練習、エラー分析、便利な練習をスマートフォンまたはブラウザで直接見つけることができます。

ニュース、新機能、役立つ資料を知りたい場合は、当社のニュースレターをご購読ください。 テレグラムチャンネル. そこは快適で、ビジネスに向いており、コードへの愛情が ❤️

💬 JS から CSS にすでに移行した効果は何ですか？また、最も効果があったものは何ですか？