https://takao.blog/ja/tags/animation/Recent content in Animation on たかおの解説Hugo -- gohugo.iojaたかおの解説Sat, 13 Jun 2026 23:11:50 +0900https://takao.blog/ja/web/css-view-transitions-single-page-api/Sat, 05 Apr 2025 00:00:00 +0900https://takao.blog/ja/web/css-view-transitions-single-page-api/<img src="https://takao.blog/img/thumnail.webp" alt="Featured image of post View Transitions APIによる滑らかなページ遷移アニメーション" /><h2 id="はじめに">はじめに </h2><p>WebサイトやWebアプリケーションにおける「ページ遷移時のアニメーション」は、ユーザー体験（UX）を向上させる重要な要素です。</p> <p>これまで、画面と画面を滑らかに繋ぐトランジションを実現するためには、Next.jsなどのフレームワークや、Framer Motion、GSAPといった複雑なJavaScriptアニメーションライブラリを利用し、要素のフェードアウトやマウント・アンマウントを制御する必要がありました。</p>https://takao.blog/ja/web/css-scroll-driven-animations/Tue, 25 Jun 2024 00:00:00 +0900https://takao.blog/ja/web/css-scroll-driven-animations/<img src="https://takao.blog/img/thumnail.webp" alt="Featured image of post CSS Scroll-Driven Animations：スクロールベース効果の未来" /><h2 id="javascriptスクロールイベントの問題点">JavaScriptスクロールイベントの問題点 </h2><p>スクロールベースの効果は従来、メインスレッドで実行されるJavaScriptのスクロールイベントリスナーに依存しており、ジャンクやフレーム落ちの原因となっていました。パッシブリスナーである程度緩和されるものの、レイアウトスラッシングは解消されません。CSS Scroll-Driven Animationsはスクロール追跡をコンポジッタースレッドに移すことで、JavaScriptを一切使わずにスムーズな60fps効果を実現します。</p>