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 つ以上のスクロールタイムラインが同じ名前であった場合、カスケード中で最後に宣言されたものが使用されます。一致するスクロールタイムラインがなければ、アニメーションはタイムラインに関連付けられません。
公式定義
形式文法
例
単純な例
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