その概念は2つあるのですが、今回はそのひとつについて、記事を書いていきます。

CSSアニメーションの新概念！スクロールタイムライン（Scroll Timeline)

さて早速ですが、その
「新しい概念」というのは、現在、主にGoogle社のChromeデベロッパーの方が中心に開発・更新と普及を進めているという

・スクロールタイムライン（Scroll Timeline)
・ビュータイムライン(View Timeline)

↑この2つの概念です。

具体的に何ができるのか

今回は、この新概念を使って、次の動画のような挙動をサンプルとして挙げたいと思います。

↑ページのスクロールに応じて伸びる、プログレスバーが確認できるかと思います。（動画の最上部、グラデーションのバーが伸びるのが確認できるかと思います）

こちら、新しい概念「スクロールタイムライン（Scroll Timeline)」を使い、CSSのみで反応している仕組みになります。
早速、次のセクションからコードサンプルなどを書いていきます。

htmlサンプル

では、サンプルコードです。まずはhtml側、用意する構造はとてもシンプルです。
1行目が「スクロール タイムライン（Scroll Timeline)」の概念で伸びるプログレスバー、
それ以降はダミーのコンテンツです。
本文は長いので…(中略)…としています。

<div id="growingBar"></div>
<div class="the-container">
  <p>
      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras non nunc
      lorem. Suspendisse tincidunt, elit quis volutpat volutpat, sapien libero
      fermentum felis, non luctus ipsum lectus quis lorem. Aenean euismod
      neque in nulla scelerisque, in faucibus magna dignissim. Duis placerat
      dolor leo, ut porta metus dapibus quis. Ut diam massa, commodo quis est
      id, eleifend fringilla ipsum. Suspendisse et ex a sem pharetra ornare.
      roin venenatis laoreet nisl, nec laoreet mauris tincidunt in. In eget
      nisl commodo, hendrerit enim vitae, interdum ex. In rhoncus porttitor
      ornare. Pellentesque suscipit neque enim, ut auctor urna sollicitudin
      eu. Curabitur ullamcorper mollis malesuada. Quisque auctor purus eu urna
      interdum, eu vehicula nulla pulvinar. Suspendisse semper accumsan ex ac
      maximus. Nunc dolor dolor, maximus id nibh at,
      ...(中略)...
  </p>
</div>

↑※長い文章が必要なので、そのまま再現する場合はダミー文章が必要ですが、
css側で .the-container の margin を 30rem auto; など、大きい値に指定することでも挙動の確認ができるかと思います。

cssサンプル

続いて、CSSのサンプルです。注目すべきは15〜18行目に書いてある、
animation-timeline: scroll(); になります。
説明などは、コードに続くセクションで書いていきます。

/* cssアニメーション自体は従来と変わらない概念 */
@keyframes growingBar {
  from {
    transform: scaleX(0);
  }
  to {
    transform: scaleX(1);
  }
}

#growingBar {
  /* cssアニメーション自体は従来と変わらない概念 */
  animation: growingBar auto linear;

  /* ここが新しい「スクロールタイムライン」という概念。 */
  /* もっともシンプルにスクロールタイムラインを使用するには */
  /* animation-timeline というプロパティに scroll() を指定する。 */
  animation-timeline: scroll();

  background: linear-gradient(45deg, rgba(150, 15, 150, 1) 5%, rgba(250, 55, 250, 1) 100%);
  height: 0.5rem;
  left: 0;
  position: fixed;
  top: 0;
  transform-origin: 0 50%;
  width: 100%;
}
.the-container {
  font-size: 0.75rem;

  /* 長い文章を用意しない場合は次の行を margin: 30rem auto; など大きい値にする */
  margin: 5rem auto;

  width: 1080px;
}

何をしているか

さて、上のセクションでサンプルのhtml, cssをご紹介したところで、これがいったい何をしているかという話をしたいと思います。

先ほどのcssの次の部分

animation-timeline: scroll();

↑これが、新しい概念「スクロールタイムライン（Scroll Timeline)」を使用している部分になります。

この「スクロールタイムライン（Scroll Timeline)」、どういう挙動をするかですが、
ものすごくざっくり言うと

「これまでの時間軸でのアニメーションの他に、新しくスクロール軸でのアニメーション空間（というか概念）を定義している」

というものになります。

従来のアニメーションは、0秒から始まる時間軸の概念であった

これまでも、CSSのみでアニメーションをさせる方法、というのは存在していました。
先ほどの記述の、次の部分ですね。

@keyframes growingBar {
  from {
    transform: scaleX(0);
  }
  to {
    transform: scaleX(1);
  }
}

↑これを実行した要素が、X方向（水平方向）に
scaleX(0)…幅0
から
scaleX(1)…ブラウザから見た相対幅100%
になる、というアニメーションの定義です。

ある種、とても難解な話にはなるのですが、
これまでの「Webの世界でのアニメーション」というのは、それがスタートした瞬間からの
「時間軸」
の概念によって制御されるものでした。

それを、あたらしい
「スクロール軸」
の概念によって制御するしくみ、

これが
新しい概念「スクロールタイムライン（Scroll Timeline)」
になります。

…え、なにがすごいの？

と、きっと、そう思うことかと思います。私も最初、そう思いました。

…元々それって、JavaScriptでできたよね？…などと、思うかもしれません。

でも、その考えは、今となっては私の中では払拭されました。

この新しい概念「スクロールタイムライン（Scroll Timeline)」
を深く知っていけば行くほど、きっとそのうち

すごい！！！！！！！！！！！！！！

と感じること、うけあいです。

今回ご紹介するサンプルは、単純にスクロール量によってプログレスバーが伸びていくシンプルなものなのですが、
今後、他のサンプルを通じて、その魅力を記事にしていきたく思っていますので、
まずは今回は、「シンプルに仕組みを知る」というきっかけになれれば幸いです。

挙動についてもう少し詳しい話など

さて、概念の説明をしたところで、もう少し挙動について書いていきます。
コメントアウトに記載の通り、最初の9行目までの、CSSアニメーションの定義は従来と同じ仕組みです。
先ほども書きましたが、重要なのが18行目、
animation-timeline: scroll();
です。（コードの後に説明を続けます）

/* cssアニメーション自体は従来と変わらない概念 */
@keyframes growingBar {
  from {
    transform: scaleX(0);
  }
  to {
    transform: scaleX(1);
  }
}

#growingBar {
  /* cssアニメーション自体は従来と変わらない概念 */
  animation: growingBar auto linear;

  /* ここが新しい「スクロールタイムライン」という概念。 */
  /* もっともシンプルにスクロールタイムラインを使用するには */
  /* animation-timeline というプロパティに scroll() を指定する。 */
  animation-timeline: scroll();
  ...(中略)...
}

こちらの scroll() はJavaScriptにおける scroll() とは別物になります。
（MDN内の詳細解説はこちらにあります）

上記MDN内の解説ページにも、次の引用の通りの記載があり、

scroll() は CSS 関数で、 animation-timeline と共に使用することができます。

ここで出てくる scroll() とは、
「animation-timeline と一緒に使用するもの」になります。

scroll() について

この scroll() ですが、
「スクロールタイムラインを、どう言う基準で定義するか？」
ということを指定できるCSS関数になります。

scroll() には、2つの引数
scroll(scroller, axis)

を指定することができます。

「scroller」 は次の3つの値のいずれかをとり、「どの要素を基準にスクロールタイムラインを定義するか」を表します。
nearest … 現在の要素の最も近い親（祖先）要素
root … 現在のページのルート（最上位）要素
self … その要素自身

「axis」は次の4つの値のいずれかをとり、「どのスクロール軸（方向）を基準にアニメーションを定義するか」を表します。
block … スクロール対象コンテナの、垂直方向の軸。ブロック軸^※1。
inline … スクロール対象コンテナの、水平方向の軸。インライン軸（上記の逆）。
x … スクロール対象コンテナの縦軸にあるスクロールバーを基準にする
y … スクロール対象コンテナの横軸にあるスクロールバーを基準にする
※1…ブロック軸というのは、横書き文章の場合、縦軸/縦書き文章の場合、横軸のこと

何も引数を指定しない場合は
animation-timeline: scroll(nearest, block);

が指定された場合と同じ挙動となります。
つまり
・現在の要素の最も近い親（祖先）要素でのスクロール値
・スクロール対象コンテナの、垂直方向の軸
を基準とした
スクロールタイムラインが定義されます。

あとの使い方は、従来のCSSアニメーションと同じです。
13行目にある通り、animation: growingBar auto linear; として
冒頭に定義してあるアニメーション growingBar を実行させています。

/* cssアニメーション自体は従来と変わらない概念 */
@keyframes growingBar {
  from {
    transform: scaleX(0);
  }
  to {
    transform: scaleX(1);
  }
}

#growingBar {
  /* cssアニメーション自体は従来と変わらない概念 */
  animation: growingBar auto linear;

  /* ここが新しい「スクロールタイムライン」という概念。 */
  /* もっともシンプルにスクロールタイムラインを使用するには */
  /* animation-timeline というプロパティに scroll() を指定する。 */
  animation-timeline: scroll();
  ...(中略)...
}

↑これの、
「アニメーションが発生する概念」が
「時間軸ではなく」
「スクロールの概念となる」

それが、（すごくざっくり言うと）
新しい概念
「スクロールタイムライン（Scroll Timeline)」
である、

ということです。

これらを踏まえた上で、先ほどの動画の挙動を見てもらうと、

「なるほど…？」

と、なんとなく、多少は
感じられてくるのではないかと思います。

ここまでの話を踏まえた上でもう一度、動いている動画を

↑…くりかえしになりますが、

ここまでの内容を踏まえた上で、この動画を見てもらうと、

「ん、なるほど…？ なるほ…ど？」

と、なんとなく、多少は
感じられてくるのではないかと思ってます。

現時点での対応状況とポリフィル（補完して動かすJS）

こちらの
新しい概念「スクロールタイムライン（Scroll Timeline)」ですが、

とても「新しい」ということもあり、この記事を書いている時点での各ブラウザの対応状況は次のとおりです。
・Chrome 115 以上
・Edge 115 以上
・Firefox 未対応
・Safari 未対応

…となります。

ですが！
ポリフィル（補完して動かすJS）もありまして、
このJSを、動かしたい対象のhtml内に読み込んであげれば、
未対応のブラウザでも動作させることが可能です！
flackr/scroll-timeline

読み込ませ方は、上記リンク先ページの Read me 部分に記載があります。

この新しい概念は、W3Cで草案も公開されてます

Webの世界の仕様（このプロパティやメソッドがどう動いて、どういう作用をするか等）を策定しているのは、
W3Cという組織だ、ということをご存知の方も多いかと思います。

今回の記事で書いた新概念ですが、W3Cのサイト上で草案(Draft)も公開されています。
https://drafts.csswg.org/scroll-animations-1/

と言うことは、かなりの確度で
今後、各種の主要ブラウザに実装されていく可能性が高い技術と思われます。

今から概念の理解を進めておくと、役に立つかもしれません。

補足：スクロールタイムライン（Scroll Timeline)はJavaScriptでの制御も

この記事のタイトルで「CSSアニメーションの新概念」と書いていますが、

実はこのスクロールタイムライン（Scroll Timeline)、
JavaScript側からの制御も可能な模様です。

今回はCSSからのアプローチの記事ですが、いずれJavaScript側からの制御についても、内容がまとまり次第、書いていければと思っています。

この記事のまとめ

今回は、Web制作・Webデザインの世界における
新しい概念「スクロールタイムライン（Scroll Timeline)」について、記事を書きました。

この記事の中段にもあるとおり、今回のサンプルは
「ページのスクロール量によってプログレスバーがCSSのみで動く」
というシンプルな挙動のものでしたが、

今後、より「スクロールタイムライン（Scroll Timeline)」の魅力が伝わりやすいような
記事を書いていきたく思ってますので続編をお待ちください。

また今回ご紹介していない「ビュータイムライン(View Timeline)」に関する記事も、今後書いていく予定ですので、続編をお待ち頂ければと思ってます。

この記事が皆さんのより良いWeb制作体験につながれば、嬉しく思います。

※この記事は内容の品質向上を目的に、随時更新を行う場合があります。