CSS - animation-range-*
概要
| 属性名 | animation-range animation-range-start animation-range-end |
|---|---|
| 値 |
animation-range: [ <animation-range-start> <animation-range-end>? ]# animation-range-start: [normal | <length-percentage> | <timeline-range-name> <length-percentage>?]# animation-range-end: [normal | <length-percentage> | <timeline-range-name> <length-percentage>?]# <timeline-range-name> = cover | contain | entry | exit | entry-crossing | exit-crossing |
| 初期値 | normal normal |
| 適用可能要素 | すべての要素 |
| 継承 | 継承しない |
| サポート | https://caniuse.com/?search=animation-range |
説明
アニメーションが始まる位置と終了する位置を指定します。詳細は スクロールドリブンアニメーション を参照してください。
関連項目
- animation-timeline
- scroll-timeline
- scroll-timeline-name
- scroll-timeline-axis
- view-timeline
- view-timeline-name
- view-timeline-axis
- view-timeline-inset
- timeline-scope
- animation-range
- animation-range-start
- animation-range-end
リンク
- https://drafts.csswg.org/scroll-animations/#animation-range
- https://developer.mozilla.org/ja/docs/Web/CSS/animation-range
- https://caniuse.com/?search=animation-range
Copyright (C) 2025 杜甫々
初版:2025年3月30日、最終更新:2025年3月30日
https://www.tohoho-web.com/css/prop/animation-range.htm