scroll-timeline-axis

Limited availability

This feature is not Baseline because it does not work in some of the most widely-used browsers.

scroll-timeline-axis は CSS のプロパティで、スクロール可能な要素（スクローラー）をスクロールすることで進行するスクロール駆動アニメーションに使用するタイムラインを提供するのに使用されるスクロールバーの方向を指定するために使用します。

構文

css

/* 論理プロパティ値 */
scroll-timeline-axis: block;
scroll-timeline-axis: inline;

/* 非論理プロパティ値 */
scroll-timeline-axis: y;
scroll-timeline-axis: x;

/* グローバル値 */
scroll-timeline-axis: inherit;
scroll-timeline-axis: initial;
scroll-timeline-axis: revert;
scroll-timeline-axis: revert-layer;
scroll-timeline-axis: unset;

値

<axis>: <axis> キーワードで、スクロール駆動アニメーションを制御するスクロールポートの方向（または軸）を指定します。デフォルト値は block です。

解説

scroll-timeline-axis プロパティは、スクロール進行タイムラインアニメーションのタイムラインを提供するスクロールバーを指定します。値はスクロールバーの軸 (<axis>) です。scroll-timeline プロパティは、タイムラインを提供するスクローラーに設定します。

スクローラー要素が軸方向のコンテナーをはみ出さないか、はみ出した部分が隠されているかクリップされている場合、スクロール進行タイムラインは作成されません。

scroll-timeline-axis および scroll-timeline-name プロパティは scroll-timeline 一括指定プロパティを使用して設定することもできます。

公式定義

初期値	`block`
適用対象	スクロールコンテナー
継承	なし
計算値	指定通り
アニメーションの種類	アニメーション不可

形式文法

scroll-timeline-axis = 
  [ block | inline | x | y ]#

この例では、--my-scroller という名前のスクロール進行タイムラインが :root 要素 (<html>) の scroll-timeline-name プロパティを使用して定義されています。そして、このタイムラインは animation クラスを持つ要素のアニメーションに animation-timeline: --my-scroller を使用して適用されます。

scroll-timeline-axis の効果を示すために、この例ではアニメーションを駆動するために水平方向の（既定値ではない）スクロールバーを使用しています。

HTML

この例の HTML は以下の通りです。

html

<body>
  <div class="content"></div>
  <div class="box animation"></div>
</body>

CSS

コンテナーの CSS は、 :root を --my-scroller という名前のスクロール進行タイムラインのソースとして設定するために、scroll-timeline-name プロパティを使用しています。スクロール軸は scroll-timeline-axis: x; で設定され、これにより水平スクロールバーの位置をアニメーションのタイムラインにします。同時に、標準外の古い値である horizontal および vertical に対応していて、x および y に対応していないブラウザー向けに scroll-timeline-axis: horizontal; も記載しています。

.content 要素の幅を大きく設定することで、 :root 要素からはみ出すようにします。

.animation 要素には animation 一括指定を使用してアニメションを適用しており、そしてスクロールタイムラインを animation-timeline で設定しています。

css

:root {
  scroll-timeline-name: --my-scroller;

  scroll-timeline-axis: x;
  scroll-timeline-axis: horizontal;
}

body {
  margin: 0;
  overflow-y: hidden;
}

.content {
  height: 100vh;
  width: 2000px;
}

.box {
  width: 100px;
  height: 100px;
  border-radius: 10px;
  background-color: rebeccapurple;
  position: fixed;
  top: 25px;
  left: 25px;
}

.animation {
  animation: rotate-appear 1ms linear;
  animation-timeline: --my-scroller;
}

@keyframes rotate-appear {
  from {
    rotate: 0deg;
    top: 0%;
  }

  to {
    rotate: 720deg;
    top: 100%;
  }
}

@layer no-support {
  @supports not (scroll-timeline-axis: block) {
    body::before {
      content: "このブラウザーは `scroll-timeline-axis` プロパティに対応していません。";
      background-color: wheat;
      display: block;
      width: 100%;
      text-align: center;
    }
  }
}

結果

下部の水平バーをスクロールすると、正方形がアニメーションします。

仕様書

Specification
Scroll-driven Animations # propdef-scroll-timeline-axis

ブラウザーの互換性

Help improve MDN

Learn how to contribute

This page was last modified on ⁨2026年1月8日⁩ by MDN contributors.

View this page on GitHub • Report a problem with this content