CSS Miscellaneous: view-timeline-name 詳細解説

CSS Miscellaneous: view-timeline-name 解説

view-timeline-name は CSS の Miscellaneous モジュールで定義されるプロパティで、スクロールタイムラインの名前を指定します。スクロールタイムラインは、スクロールによってアニメーションを制御するために使用されます。

詳細

view-timeline-name プロパティは、以下の要素に適用できます。

• スクロール可能な要素 (例えば、div 要素、body 要素)
• スクロールバーを持つ要素 (例えば、::-webkit-scrollbar 疑似要素)

view-timeline-name プロパティの値は、以下のいずれかになります。

• 識別子 (ident)
• カスタム識別子 (dashed-ident)

識別子は、標準の CSS キーワードと衝突しないようにする必要があります。カスタム識別子は、-- で始まる必要があります。

例

以下の例では、#container 要素のスクロールタイムラインの名前を main-timeline に設定しています。

#container {
  scroll-timeline-name: main-timeline;
}

以下の例では、::-webkit-scrollbar 疑似要素のスクロールタイムラインの名前を scrollbar-timeline に設定しています。

::-webkit-scrollbar {
  scroll-timeline-name: scrollbar-timeline;
}

ブラウザのサポート

view-timeline-name プロパティは、多くのブラウザでサポートされています。詳細は、Can I Use: [無効な URL を削除しました] を参照してください。

関連プロパティ

• scroll-timeline
• animation-timeline

補足

• view-timeline-name プロパティは、まだ実験段階の機能です。
• スクロールタイムラインは、複雑なアニメーションを作成するために使用できます。

CSS view-timeline-name サンプルコード

<div id="container">
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
</div>

#container {
  height: 200px;
  overflow-y: scroll;
  scroll-timeline-name: main-timeline;
}

p {
  animation: fade-in 2s ease-in-out forwards;
  animation-timeline: main-timeline;
}

@keyframes fade-in {
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}

この例では、#container 要素のスクロールタイムラインの名前を main-timeline に設定しています。そして、p 要素は main-timeline に沿って fade-in アニメーションを実行します。

スクロールバーのアニメーション

<div id="container">
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
</div>

#container {
  height: 200px;
  overflow-y: scroll;
  scroll-timeline-name: main-timeline;
}

::-webkit-scrollbar {
  scroll-timeline-name: scrollbar-timeline;
}

::-webkit-scrollbar-thumb {
  animation: scrollbar-pulse 2s ease-in-out infinite;
  animation-timeline: scrollbar-timeline;
}

@keyframes scrollbar-pulse {
  from {
    background-color: #ccc;
  }

  to {
    background-color: #666;
  }
}

この例では、#container 要素のスクロールバーのスクロールタイムラインの名前を scrollbar-timeline に設定しています。そして、::-webkit-scrollbar-thumb 疑似要素は scrollbar-timeline に沿って scrollbar-pulse アニメーションを実行します。

複数のタイムライン

<div id="container">
  <div class="header">
    <h1>タイトル</h1>
  </div>
  <div class="content">
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
  </div>
</div>

#container {
  height: 200px;
  overflow-y: scroll;
}

.header {
  scroll-timeline-name: header-timeline;
}

.content {
  scroll-timeline-name: content-timeline;
}

.header {
  animation: fade-in 2s ease-in-out forwards;
  animation-timeline: header-timeline;
}

.content {
  animation: fade-in 1s ease-in-out forwards;
  animation-timeline: content-timeline;
}

@keyframes fade-in {
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}

この例では、#container 要素の header 要素と content 要素それぞれに個別のスクロールタイムラインを設定しています。

• view-timeline-name プロパティは、さまざまな方法で

CSS view-timeline-name プロパティのその他の使用方法

view-timeline-name プロパティは、スクロール方向を制御するためにも使用できます。

<div id="container">
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
</div>

#container {
  height: 200px;
  overflow: scroll;
  scroll-timeline-name: main-timeline;
}

p {
  animation: fade-in 2s ease-in-out forwards;
  animation-timeline: main-timeline;
}

@keyframes fade-in {
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}

/* 縦方向スクロールのみ */
@media (orientation: portrait) {
  #container {
    scroll-timeline-name: vertical-timeline;
  }

  p {
    animation-timeline: vertical-timeline;
  }
}

/* 横方向スクロールのみ */
@media (orientation: landscape) {
  #container {
    scroll-timeline-name: horizontal-timeline;
  }

  p {
    animation-timeline: horizontal-timeline;
  }
}

この例では、#container 要素のスクロール方向に応じて、main-timeline、vertical-timeline、horizontal-timeline のいずれかのスクロールタイムラインが適用されます。

要素の表示位置の制御

view-timeline-name プロパティは、要素の表示位置を制御するためにも使用できます。

<div id="container">
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
</div>

#container {
  height: 200px;
  overflow-y: scroll;
  scroll-timeline-name: main-timeline;
}

p {
  animation: fade-in 2s ease-in-out forwards;
  animation-timeline: main-timeline;
}

@keyframes fade-in {
  from {
    opacity: 0;
    transform: translateX(-100%);
  }

  to {
    opacity: 1;
    transform: translateX(0);
  }
}

/* 要素を画面中央に表示 */
@media (min-width: 768px) {
  #container {
    scroll-timeline-name: center-timeline;
  }

  p {
    animation-timeline: center-timeline;
  }

  @keyframes fade-in {
    from {
      opacity: 0;
      transform: translateX(50%);
    }

    to {
      opacity: 1;
      transform: translateX(0);
    }
  }
}

この例では、#container 要素の幅が 768px 以上の場合、center-timeline スクロールタイムラインが適用され、p 要素は画面中央に表示されます。

• view-timeline-name プロパティは、JavaScript からも操作できます。

注意

上記はあくまでも例であり、実際の使用方法は状況によって異なります。