スクロール駆動アニメーションジェネレーターとは
スクロール駆動アニメーションジェネレーターは、animation-timelineを使用したスクロール駆動CSSアニメーションを生成します。 出力は公開サイトに使う前に確認しやすい形で表示されます。
Quick answer
Scroll-driven animations let you link an animation progress directly to the scroll position of a container, eliminating the need for scroll event listeners and JavaScript-based parallax libraries.
Limitations
- Chrome 115+ and Edge 115+ support scroll-driven animations. Firefox and Safari do not yet support the ScrollTimeline API.
- Scroll-driven animations use the Web Animations API. CSS @keyframes are still required for defining animation states.
- Scroll() and view() timing progress is determined by scroll distance. Animations may behave differently on very short or very long content.
使い方
- 必要な値を入力します。
- 結果パネルの出力を確認します。
- ページに合う部分だけコピーします。
- 公開前にブラウザとホスティング環境で確認します。
主な用途
- 公開前の繰り返し作業を短くする。
- マークアップ、CSS、チェックリストを準備する。
- 静的サイトで見落としやすい小さなミスを減らす。