CSS - animation-timeline

概要

属性名	animation-timeline
値	<single-animation-timeline>#
値の詳細	<single-animation-timeline> = auto \| none \| <dashed-ident> \| <scroll()> \| <view()>
初期値	auto
適用可能要素	すべての要素
継承	継承しない
サポート	https://caniuse.com/mdn-css_properties_animation-timeline

説明

アニメーションがどのタイムラインに従うかを指定します。詳細はスクロールドリブンアニメーションを参照してください。

atuo: ドキュメントのデフォルトタイムライン(通常はページを開いてからの経過時間)に従います。
none: どのタイムラインにも従いません。アニメーションは行われません。
<dashed-ident>: scroll-timeline-name または view-timeline-name で宣言されたタイムライン名に従います。
<scroll()>: 下記を参照してください。
<view()>: 下記を参照してください。

scroll()

scroll( [ <scroller> || <axis> ]? )
<scroller> = nearest | root | self
<axis> = block | inline | x | y

<scroller> はスクロールドリブンアニメーションがどの要素のスクロールバーに追従するかを指定します。

nearest : スクロールバーを持つ最も近い祖先要素。デフォルト値。
root : ルート要素。
self : 自分自身の要素。

<axis> はスクロールドリブンアニメーションがどの方向のスクロールに追従するかを指定します。

block : ブロック方向。デフォルト値。
inline : インライン方向。
x : 水平方向(X軸方向)。
y : 垂直方向(Y軸方向)。

view()

view( [ <axis> || <view-timeline-inset> ]? )
<axis> = block | inline | x | y
<view-timeline-inset> = [ [ auto | <length-percentage> ]{1,2} ]#

<axis> はスクロールドリブンアニメーションがどの方向のスクロールに追従するかを指定します。

block : ブロック方向。デフォルト値。
inline : インライン方向。
x : 水平方向(X軸方向)。
y : 垂直方向(Y軸方向)。

<view-timeline-inset> はアニメーションの終了位置と開始位置を長さまたはパーセントで指定します。view(30% 20%) は入り始めて 20% の箇所でアニメーションが始まり、終わりから 30% の箇所でアニメーションが終わります。終了・開始の順で指定するので注意してください。値をひとつのみ記述した場合は開始・終了同じ値と見なされます。値には自動(auto)や負数を指定することもできます。

使用例

スクロールドリブンアニメーションを参照してください。

リンク

初版：2025年3月30日、最終更新：2025年3月30日

https://www.tohoho-web.com/css/prop/animation-timeline.htm

CSS - animation-timeline

概要

説明

scroll()

view()

使用例

関連項目

リンク