| 属性名 | animation-timeline |
|---|---|
| 値 | <single-animation-timeline># |
| 値の詳細 | <single-animation-timeline> = auto | none | <dashed-ident> | <scroll()> | <view()> |
| 初期値 | auto |
| 適用可能要素 | すべての要素 |
| 継承 | 継承しない |
| サポート | https://caniuse.com/mdn-css_properties_animation-timeline |
アニメーションがどのタイムラインに従うかを指定します。詳細は スクロールドリブンアニメーション を参照してください。
scroll( [ <scroller> || <axis> ]? ) <scroller> = nearest | root | self <axis> = block | inline | x | y
<scroller> はスクロールドリブンアニメーションがどの要素のスクロールバーに追従するかを指定します。
<axis> はスクロールドリブンアニメーションがどの方向のスクロールに追従するかを指定します。
view( [ <axis> || <view-timeline-inset> ]? )
<axis> = block | inline | x | y
<view-timeline-inset> = [ [ auto | <length-percentage> ]{1,2} ]#
<axis> はスクロールドリブンアニメーションがどの方向のスクロールに追従するかを指定します。
<view-timeline-inset> はアニメーションの終了位置と開始位置を長さまたはパーセントで指定します。view(30% 20%) は入り始めて 20% の箇所でアニメーションが始まり、終わりから 30% の箇所でアニメーションが終わります。終了・開始の順で指定するので注意してください。値をひとつのみ記述した場合は開始・終了同じ値と見なされます。値には自動(auto)や負数を指定することもできます。
スクロールドリブンアニメーション を参照してください。