CSS - view-timeline-*
概要
| 属性名 | view-timeline view-timeline-name view-timeline-axis view-timeline-inset |
|---|---|
| 値 |
view-timeline: [ <view-timeline-name> [ <view-timeline-axis> || <view-timeline-inset> ]? ]# view-timeline-name: [ none | <dashed-ident> ]# view-timeline-axis: [ block | inline | x | y ]# view-timeline-inset: [[ auto | <length-percentage> ]{1,2} ]# |
| 初期値 | none block auto |
| 適用可能要素 | すべての要素 |
| 継承 | 継承しない |
| サポート | https://caniuse.com/?search=view-timeline |
説明
animation-timeline から参照されるビュー進捗タイムラインの名前とスクロール方向とインセット値を定義します。詳細は スクロールドリブンアニメーション を参照してください。
関連項目
- animation-timeline
- scroll-timeline
- scroll-timeline-name
- scroll-timeline-axis
- timeline-scope
- animation-range
- animation-range-start
- animation-range-end
リンク
- https://drafts.csswg.org/scroll-animations/#view-timeline-shorthand
- https://developer.mozilla.org/en-US/docs/Web/CSS/view-timeline
- https://caniuse.com/?search=view-timeline
Copyright (C) 2025 杜甫々
初版：2025年3月30日、最終更新：2025年3月30日
https://www.tohoho-web.com/css/prop/view-timeline.htm