CSS「offset-path」と「@custom-media」2026年Web標準の作例・プロンプト集

CSSの進化がアニメーションのパラダイムを変える

2026年5月、Chromium系ブラウザ（Chrome 130+）およびFirefox 130+でoffset-pathプロパティが正式にBaselineに加わった。これにより、従来はJavaScript＋requestAnimationFrameか、SVGアニメーション（animateMotion）でしか実現できなかった「任意の曲線に沿った要素の移動」が、純粋なCSSだけで記述できるようになる。

同時に、@custom-mediaルールも広くサポートされ始めた。これはメディアクエリの条件を名前で定義し、再利用可能にするCSSの機能だ。

開発者にとってのインパクトは大きい。特に、UIコンポーネントのマイクロインタラクションや、データ可視化のアニメーション表現の選択肢が増える。加えて、@custom-mediaにより、複数のブレイクポイントを一箇所で管理できるため、CSS設計が格段に整理される。

offset-path：CSSだけで曲線パスアニメーション

offset-pathは、要素がたどるパスを定義するプロパティ。値にはpath()関数でSVGパス文字列を渡せるほか、ray()（角度と距離によるライン）やcircle()、基本形状も指定可能。

例えば、以下のコードでボックスが円周上を回り続けるアニメーションが書ける。

@keyframes move {
  0% {
    offset-distance: 0%;
  }
  100% {
    offset-distance: 100%;
  }
}
.box {
  offset-path: circle(50%);
  animation: move 3s linear infinite;
}

offset-distanceがパス上の進行度を0〜100%で制御する。従来のtranslate()だけでは複雑な曲線は再現困難だったが、offset-pathならパスを事前に設計し、あとはoffset-distanceアニメーション一本で完結する。

実装上の注意点として、パスが閉じていない場合（始点と終点が異なる）、offset-distance: 100%で要素が消失するわけではなく、終点で停止する。また、offset-rotateプロパティを併用することで、要素の進行方向への回転を制御できる。auto値で常にパスの接線方向に要素が向く。

@custom-media：メディアクエリの管理を効率化

@custom-mediaは、メディアクエリの条件式を変数化し、--名前で呼び出せるようにするルール。

@custom-media --narrow-viewport (max-width: 768px);
@custom-media --wide-viewport (min-width: 1200px);

@media (--narrow-viewport) {
  .container { flex-direction: column; }
}
@media (--wide-viewport) {
  .container { flex-direction: row; }
}

プロジェクト全体でブレイクポイントを一箇所に集約できるため、768pxのようなマジックナンバーが散らばらない。また、--narrow-viewportが一体何を指すか明確になり、チームでの合意形成しやすい。

ただし、@custom-mediaはCSS変数（--custom-property）と異なり、メディアクエリの文脈でしか使えない。また、メディアクエリのメディア特性（hoverやprefers-reduced-motionなど）と組み合わせて複合条件も定義できる。

@custom-media --touch-only (hover: none) and (pointer: coarse);

これにより、タッチデバイス向けの微調整を一つのカスタムメディアで管理できる。

二つの機能を組み合わせた応用パターン

offset-pathと@custom-mediaを組み合わせることで、レスポンシブなパスアニメーションも可能だ。例えば、画面幅に応じて移動パスを変更する場合、従来ならJavaScriptでメディアクエリを監視していたが、今はCSSだけで完結する。

@custom-media --large-screen (min-width: 1024px);

.element {
  offset-path: path("M10,10 Q100,200 300,40");
  animation: move 4s infinite;
  will-change: offset-distance;
}

@media (--large-screen) {
  .element {
    offset-path: path("M10,10 C100,300 200,100 300,200");
  }
}

こうした書き方により、ビューポートサイズに応じて動きの質を変えられる。また、will-change: offset-distanceを指定しておくと、レイアウトシフトを防ぎつつGPU最適化が期待できる。

実際の移行コストと落とし穴

既存のJavaScriptアニメーションライブラリ（GSAPやAnime.js）からの移行は、単純なアニメーションの置き換えなら容易だが、複数のパスをタイムラインで連鎖させる場合などはCSSのanimation-delayとanimation-iteration-countで調整する必要がある。複雑な制御が必要な箇所はJavaScriptに残す判断も重要。

offset-pathのブラウザサポートは2026年4月時点でChrome 130+、Firefox 130+であり、Safari（Safari 18以降で実装中）は未だ不完全。プロダクションで使う場合は、@supportsでフォールバックを用意する。

@supports (offset-path: circle(50%)) {
  /* 最新ブラウザ向けのアニメーション */
}
@supports not (offset-path: circle(50%)) {
  /* フォールバック用のtranslateアニメーション */
}

@custom-mediaはSafari 18.2以降でサポート済み。こちらは比較的広く使えるが、古いiOS Safariでは無視されるため、フォールバックとして通常の@mediaも併記すると安全。

まとめに代えて：CSSの「表現力」が引き上げられる

offset-pathと@custom-mediaは、それぞれ単体でも十分価値があるが、組み合わせることでCSSが扱えるアニメーション領域が飛躍的に拡大する。特に、データ可視化のUIやオンボーディングのガイド演出で、これまでSVG＋JavaScriptに頼っていた処理をCSSに閉じ込められるメリットは大きい。

2026年後半には、offset-pathのSafari対応が完了し、Baseline全域での利用が現実的になる。その時、この機能を先取りして習得していた開発者は、一歩先を行くUIデザインを提案できるだろう。

参照

• New to the web platform in May – web.dev
• April 2026 Baseline monthly digest – web.dev
• New to the web platform in April – web.dev
• offset-path – CSS-Tricks
• @custom-media – CSS-Tricks