この機能は2023年8月現在、ChromeやEdgeなどのChromiumベースのブラウザーではサポートされていますが、他のブラウザーではサポートされていません。 使用する場合はブラウザーのサポート状況を確認してから使用することをお勧めします。 皆さんはスクロール連動型アニメーションをご存知でしょうか? スクロール連動型アニメーションとは、スクロール量に応じてアニメーションを発生させることができるCSSの機能です。 この機能を活用することでJavaScript不要でユーザーのマウススクロールに応じたアニメーションを実装することができます。 従来のanimationのCSSに加えて、animation-timelineというプロパティを指定することでアニメーションの進行度をスクロール量に応じて変化させることができます。 スクロール連動型アニメーションの使用例 使用例1.(パララックス) パラ
![CSSだけで実現できるスクロール連動アニメーションの紹介](https://cdn-ak-scissors.b.st-hatena.com/image/square/01d375158d5985a94e4152261fac8462629cf469/height=288;version=1;width=512/https%3A%2F%2Fstatic.mosya.dev%2Fblogs%2Fscroll-driven-animations%2Fogp.png)