scroll-timeline-axis

Limited availability

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

Experimental: これは実験的な機能です。
本番で使用する前にブラウザー互換性一覧表をチェックしてください。

scroll-timeline-axisCSS のプロパティで、スクロール可能な要素(スクローラー)を上下(または左右)にスクロールすることで進行する 名前付きスクロール進行タイムライン アニメーションのタイムラインを提供するために使用されるスクロールバーの方向を指定するために使用します。 scroll-timeline はタイムラインを提供するスクローラーに設定します。詳しくは CSS スクロール駆動アニメーションを参照してください。

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

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

構文

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

scroll-timeline-axis に許可されている値は次の通りです。

block

スクローラー要素のブロック軸にあるスクロールバーで、行内のテキストの流れに垂直な方向の軸です。標準的な英語のような横書きモードでは y と同じになり、縦書きモードでは x と同じになります。これが既定値です。

inline

スクローラー要素のインライン軸にあるスクロールバーで、行内のテキストの流れと並行する方向の軸です。横書きモードでは x と同じになり、縦書きモードでは y と同じになります。

y

スクローラー要素の垂直軸上のスクロールバーです。

x

スクローラー要素の水平軸上のスクロールバーです。

公式定義

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

形式文法

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

スクロール進行タイムラインの軸の定義

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

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

HTML

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

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

CSS

コンテナーの CSS は、 :root--myScroller という名前のスクロール進行タイムラインのソースとして設定するために、scroll-timeline-name プロパティを使用します。 スクロール軸は scroll-timeline-axis: x; (Chromium) および scroll-timeline-axis: horizontal; (Firefox) を使用して設定します - これにより、水平スクロールバーの位置がアニメーションタイムラインを決定します。

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

また、 .animation 要素には、 animation-timeline: --myScroller; を使用してタイムラインが適用されており、 Firefox でこの例がうまくいくように animation-duration も適用されています。

css
:root {
  scroll-timeline-name: --myScroller;

  /* Chromium は新しい x/y 構文に対応 */
  scroll-timeline-axis: x;
  /* Firefox はまだ古い horizontal/vertical 構文に対応 */
  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;
  animation-timeline: --myScroller;
  animation-duration: 1ms; /* Firefox では、アニメーションを適用するために必要 */
}

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

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

結果

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

仕様書

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

ブラウザーの互換性

Report problems with this compatibility data on GitHub
desktopmobile
Chrome
Edge
Firefox
Opera
Safari
Chrome Android
Firefox for Android
Opera Android
Safari on iOS
Samsung Internet
WebView Android
WebView on iOS
scroll-timeline-axis
Experimental
block
Experimental
inline
Experimental
x
Experimental
y
Experimental

Legend

Tip: you can click/tap on a cell for more information.

Full support
Full support
No support
No support
Experimental. Expect behavior to change in the future.
See implementation notes.
User must explicitly enable this feature.

関連情報