scroll-timeline-axisプロパティは何に使いますか？

scroll-timeline-axisプロパティは、スクロール駆動アニメーションにおいて、どの方向のスクロールでタイムラインを進行させるかを指定するために使用します。垂直方向（block）、水平方向（inline）、またはその両方を指定できます。

scroll-timeline-axisプロパティの主な値は何ですか？

主な値は、block（垂直方向）、inline（水平方向）、x（水平方向の物理的な軸）、y（垂直方向の物理的な軸）です。デフォルト値はblockです。

scroll-timeline-axisとscroll-timelineの違いは何ですか？

scroll-timeline-axisはタイムラインの軸方向のみを指定するプロパティです。一方、scroll-timelineはscroll-timeline-nameとscroll-timeline-axisをまとめて指定できるショートハンドプロパティです。

【CSS】scroll-timeline-axisプロパティの使い方 - スクロールタイムラインの軸を制御する方法

この記事で学べること

scroll-timeline-axisプロパティの概念と目的
各値（block、inline、x、y）の違いと使い分け
スクロール方向に応じたアニメーション制御の実装方法
scroll-timelineショートハンドとの関係
ブラウザ対応状況と注意点

概要

scroll-timeline-axisプロパティは、CSSのスクロール駆動アニメーション（Scroll-driven Animations）機能の一部で、スクロールタイムラインがどの軸（方向）に沿って進行するかを指定します。このプロパティを使用することで、垂直スクロールまたは水平スクロールに応じてアニメーションを制御できます。

スクロール駆動アニメーションとは、従来の時間ベースのアニメーションとは異なり、ユーザーのスクロール位置に基づいてアニメーションの進行度を決定する仕組みです。scroll-timeline-axisは、このスクロールの方向を明示的に指定するために使用されます。

scroll-timeline-axisプロパティの基本構文

scroll-timeline-axisプロパティは以下の構文で使用します。

/* キーワード値 */
scroll-timeline-axis: block;   /* デフォルト値 - ブロック方向（通常は垂直） */
scroll-timeline-axis: inline;  /* インライン方向（通常は水平） */
scroll-timeline-axis: x;       /* 水平軸 */
scroll-timeline-axis: y;       /* 垂直軸 */

各値の説明

値	説明	一般的な対応方向
`block`	ブロック方向のスクロールに連動（デフォルト）	縦書きでは水平、横書きでは垂直
`inline`	インライン方向のスクロールに連動	縦書きでは垂直、横書きでは水平
`x`	水平方向のスクロールに連動	常に水平方向
`y`	垂直方向のスクロールに連動	常に垂直方向

論理的な軸と物理的な軸の違い

blockとinlineは論理的な軸で、文書の書字方向（writing-mode）に依存します。

横書き（writing-mode: horizontal-tb）の場合：blockは垂直方向、inlineは水平方向
縦書き（writing-mode: vertical-rlなど）の場合：blockは水平方向、inlineは垂直方向

一方、xとyは物理的な軸で、書字方向に関係なく常に同じ方向を指します。

使用例

基本的な使用例：垂直スクロールに連動したアニメーション

以下の例では、ページの垂直スクロールに連動してプログレスバーが進行します。

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>scroll-timeline-axisの基本例</title>
<style>
/* スクロールタイムラインを定義 */
.scroll-container {
  scroll-timeline-name: --main-scroll;
  scroll-timeline-axis: block; /* 垂直方向のスクロールに連動 */
  height: 100vh;
  overflow-y: scroll;
}

/* プログレスバーのアニメーション */
@keyframes grow-progress {
  from {
    transform: scaleX(0);
  }
  to {
    transform: scaleX(1);
  }
}

.progress-bar {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 4px;
  background: linear-gradient(90deg, #3b82f6, #8b5cf6);
  transform-origin: left;
  animation: grow-progress linear;
  animation-timeline: --main-scroll;
}

/* コンテンツのスタイル */
.content {
  height: 300vh;
  padding: 20px;
  background: linear-gradient(180deg, #f0f9ff, #e0f2fe);
}
</style>
</head>
<body>
<div class="scroll-container">
  <div class="progress-bar"></div>
  <div class="content">
    <h1>スクロールしてください</h1>
    <p>ページをスクロールすると、上部のプログレスバーが進行します。</p>
  </div>
</div>
</body>
</html>

この例では、scroll-timeline-axis: blockを指定することで、ブロック方向（縦方向）のスクロールに応じてプログレスバーが伸びていきます。

水平スクロールに連動したアニメーション

水平スクロールのギャラリーで、スクロール位置に応じて背景色が変化する例です。

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>水平スクロールアニメーション</title>
<style>
/* 水平スクロールコンテナ */
.horizontal-gallery {
  scroll-timeline-name: --gallery-scroll;
  scroll-timeline-axis: inline; /* 水平方向のスクロールに連動 */
  display: flex;
  overflow-x: scroll;
  width: 100%;
  height: 400px;
}

/* ギャラリーアイテム */
.gallery-item {
  flex: 0 0 300px;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 24px;
  font-weight: bold;
  color: white;
}

.gallery-item:nth-child(odd) {
  background: #3b82f6;
}

.gallery-item:nth-child(even) {
  background: #8b5cf6;
}

/* 背景色が変化するアニメーション */
@keyframes color-shift {
  0% {
    background-color: #1e3a8a;
  }
  50% {
    background-color: #7c3aed;
  }
  100% {
    background-color: #dc2626;
  }
}

body {
  animation: color-shift linear;
  animation-timeline: --gallery-scroll;
  margin: 0;
  padding: 20px;
}
</style>
</head>
<body>
<h1>水平スクロールギャラリー</h1>
<div class="horizontal-gallery">
  <div class="gallery-item">1</div>
  <div class="gallery-item">2</div>
  <div class="gallery-item">3</div>
  <div class="gallery-item">4</div>
  <div class="gallery-item">5</div>
  <div class="gallery-item">6</div>
  <div class="gallery-item">7</div>
  <div class="gallery-item">8</div>
</div>
</body>
</html>

この例では、scroll-timeline-axis: inlineを指定することで、水平方向のスクロールに応じて背景色が変化します。

scroll-timelineショートハンドの使用

scroll-timeline-nameとscroll-timeline-axisは、scroll-timelineショートハンドプロパティでまとめて指定できます。

/* 個別に指定する場合 */
.container {
  scroll-timeline-name: --my-timeline;
  scroll-timeline-axis: block;
}

/* ショートハンドで指定する場合 */
.container {
  scroll-timeline: --my-timeline block;
}

/* 軸を省略した場合はデフォルト値（block）が使用される */
.container {
  scroll-timeline: --my-timeline;
}

物理的な軸（x、y）を使用した例

多言語対応サイトで、書字方向に関係なく常に同じ動作を保証したい場合は、物理的な軸を使用します。

/* 常に垂直方向のスクロールに連動 */
.vertical-scroll-container {
  scroll-timeline-name: --vertical-timeline;
  scroll-timeline-axis: y; /* 書字方向に関係なく垂直方向 */
}

/* 常に水平方向のスクロールに連動 */
.horizontal-scroll-container {
  scroll-timeline-name: --horizontal-timeline;
  scroll-timeline-axis: x; /* 書字方向に関係なく水平方向 */
}

実践的な例：スクロールで要素が回転するアニメーション

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>スクロール回転アニメーション</title>
<style>
html {
  scroll-timeline-name: --page-scroll;
  scroll-timeline-axis: y; /* 垂直スクロールを監視 */
}

body {
  margin: 0;
  height: 400vh;
  background: linear-gradient(180deg, #0f172a, #1e3a8a, #7c3aed, #ec4899);
}

@keyframes rotate-element {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(720deg); /* 2回転 */
  }
}

.rotating-box {
  position: fixed;
  top: 50%;
  left: 50%;
  width: 100px;
  height: 100px;
  margin: -50px 0 0 -50px;
  background: white;
  border-radius: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 48px;
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.3);
  animation: rotate-element linear;
  animation-timeline: --page-scroll;
}

.instruction {
  position: fixed;
  bottom: 20px;
  left: 50%;
  transform: translateX(-50%);
  color: white;
  font-size: 18px;
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.5);
}
</style>
</head>
<body>
<div class="rotating-box">⭐</div>
<p class="instruction">スクロールして星を回転させてください</p>
</body>
</html>

scroll-timeline-axisと関連プロパティ

scroll-timeline-axisは、スクロール駆動アニメーションの一連のプロパティと組み合わせて使用します。

プロパティ	説明
`scroll-timeline-name`	スクロールタイムラインに名前を付ける
`scroll-timeline-axis`	タイムラインの軸方向を指定
`scroll-timeline`	上記2つのショートハンドプロパティ
`animation-timeline`	アニメーションに適用するタイムラインを指定

注意点

ブラウザ対応状況

scroll-timeline-axisプロパティは、CSS Scroll-driven Animations仕様の一部であり、比較的新しい機能です。

Chrome/Edge: バージョン115以降でサポート
Firefox: バージョン110以降でフラグ付きでサポート（layout.css.scroll-driven-animations.enabled）
Safari: 執筆時点では未サポート

本番環境で使用する場合は、@supportsを使用してフォールバックを実装することを推奨します。

/* フォールバック処理の例 */
.progress-bar {
  /* フォールバック：静的なスタイル */
  transform: scaleX(0);
}

@supports (animation-timeline: scroll()) {
  .progress-bar {
    animation: grow-progress linear;
    animation-timeline: --main-scroll;
  }
}

パフォーマンスに関する考慮事項

スクロール駆動アニメーションは、GPUで処理されるtransformやopacityプロパティと組み合わせることで、滑らかな動作が期待できます
レイアウトに影響を与えるプロパティ（width、height、marginなど）のアニメーションは避けてください
複雑なアニメーションを多用する場合は、will-changeプロパティの使用を検討してください

論理的な軸 vs 物理的な軸の選択

論理的な軸（block、inline）: 国際化対応が必要なサイトで推奨。書字方向に応じて自動的に適切な方向が選択されます
物理的な軸（x、y）: 書字方向に関係なく一貫した動作が必要な場合に使用

まとめ

scroll-timeline-axisプロパティは、スクロール駆動アニメーションにおいてタイムラインの進行方向を制御するための重要なプロパティです。主なポイントは以下の通りです。

ポイントの振り返り

値	用途	特徴
`block`	縦スクロール連動（デフォルト）	書字方向に依存
`inline`	横スクロール連動	書字方向に依存
`y`	縦スクロール連動	書字方向に非依存
`x`	横スクロール連動	書字方向に非依存

スクロール駆動アニメーションを活用することで、ユーザーのスクロール操作に応じた直感的でインタラクティブな体験を提供できます。scroll-timeline-axisを適切に設定し、魅力的なWebページを作成しましょう。