animation-timeline

animation-timeline は CSS のプロパティで、この要素に適用されるスクロールアニメーションを記述する 1 つ以上の @scroll-timeline アットルールの名前を指定します。

ふつうはすべてのアニメーションプロパティを一度に設定する一括指定プロパティの animation を使用したほうが便利です。

構文

css

/* 単一のアニメーション */
animation-timeline: none;
animation-timeline: test_05;
animation-timeline: -specific;
animation-timeline: sliding-vertically;

/* 複数のアニメーション */
animation-timeline: test1, animation4;
animation-timeline:
  none,
  -moz-specific,
  sliding;

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

値

auto

アニメーションのタイムラインはこの文書の既定の DocumentTimeline (en-US) です。

none

アニメーションはタイムラインに関連付けられません。

<timeline-name>

スクロールタイムラインを識別する <custom-ident> または文字列で、 @scroll-timeline ルールで宣言されているものです。 2 つ以上のスクロールタイムラインが同じ名前であった場合、カスケード中で最後に宣言されたものが使用されます。一致するスクロールタイムラインがなければ、アニメーションはタイムラインに関連付けられません。

公式定義

初期値auto
適用対象すべての要素
継承なし
計算値a list, each item either a case-sensitive CSS identifier or the keywords none, auto
アニメーションの種類アニメーション不可

形式文法

animation-timeline = 
  <single-animation-timeline>#  

<single-animation-timeline> = 
  auto             |
  none             |
  <timeline-name>  

<timeline-name> = 
  <custom-ident>  |
  <string>

例

単純な例

squareTimeline という名前のスクロールタイムラインが宣言されており、 #square 要素に animation-timeline: squareTimeline を用いて適用されています。

HTML

html

<div id="container">
  <div id="square"></div>
</div>

CSS

css

#container {
  height: 300px;
}

#square {
  background-color: deeppink;
  width: 100px;
  height: 100px;
  margin-top: 100px;
  animation-name: rotateAnimation;
  animation-duration: 3s;
  animation-direction: alternate;
  animation-timeline: squareTimeline;
}

@scroll-timeline squareTimeline {
  source: selector("#container");
  orientation: "vertical";
  scroll-offsets: 0px, 300px;
}

@keyframes rotateAnimation {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}

結果

仕様書

Specification
CSS Animations Level 2
# animation-timeline

ブラウザーの互換性

BCD tables only load in the browser

関連情報