CSS スクロール駆動アニメーション生成器
ネイティブ CSS スクロール駆動アニメーション — 固定期間ではなく animation-timeline: view() または scroll() に接続された @keyframes ブロック — を既製プリセット（フェードイン、スライドイン、スケールアップ、回転イン、クリップパス表示）から設定可能なアニメーション範囲で生成します。
入力
view() はエレメントがビューポートに入るときにアニメート；scroll() はページのスクロール進度に結びつけます。
名前付き範囲（entry/cover）は view() と組み合わせて使用；scroll() タイムラインは単純なパーセンテージのみを理解します。
出力
このツールを使う他の方法
REST API
curl -X POST https://api.iotools.cloud/v1/tool/css-scroll-driven-animation-generator \
-H "Authorization: Bearer YOUR_API_KEY" \
-H "Content-Type: application/json" \
-d '{
"animationType": "fadeIn",
"timelineType": "view",
"animationRange": "entry 0% cover 100%"
}'ご自身のアカウントのキーに差し替えてください。ツールのフィールドがそのままリクエストボディになります——ラッパーはありません。
AIエージェントに依頼する
Use the IOTools `css-scroll-driven-animation-generator` tool (CSS Scroll-Driven Animation Generator) on this input:
YOUR_INPUT_HEREIOTools MCPサーバーに接続された任意のエージェントにこれを貼り付け、入力内容を追加してください。
埋め込みウィジェット
<iframe
src="https://iotools.cloud/embed/css-scroll-driven-animation-generator/"
width="100%" height="520" frameborder="0" scrolling="no" loading="lazy"
title="CSS スクロール駆動アニメーション生成器 — iotools.cloud"
sandbox="allow-scripts allow-forms allow-same-origin allow-downloads allow-popups allow-popups-to-escape-sandbox"
allow="clipboard-write"
style="width:100%;border:1px solid #e5e7eb;border-radius:12px;overflow:hidden"></iframe>
<script src="https://iotools.cloud/embed.js" async></script>ご自身のページに貼り付けるだけ——無料、キー不要、リンクを掲載するだけです。
| API/MCP 1回あたりの費用 | 5クレジットから |
|---|---|
| クレジットが足りませんか? | 料金を見る |
次の方法でも利用可能
ガイド
スクロール駆動アニメーションは、ネイティブ CSS プロパティ animation-timeline を使用して、エレメントのアニメーション進度を壁時間ではなくスクロール位置に結びつけます。view() に設定するとエレメントはビューポートに入るにつれてフェード、スライド、スケール、回転、または表示されます；scroll() に設定するとアニメーションはページ（またはスクロールコンテナ）のスクロール進度を直接追跡します — JavaScript なしのスクロール連動プログレスバー、パラレックスレイヤー、または表示エフェクト、完全にコンポジターによって駆動されます。
このジェネレータは両方の部分を生成します：選択したプリセット用の適切な from/to ステップを含む @keyframes ブロック、および固定 animation-duration の代わりに animation-timeline と animation-range で接続する付随ルール。両方をスタイルシートにコピーして、.scroll-animate を独自のセレクタに置き換えます。
ブラウザサポート
スクロール駆動アニメーションは比較的新しい CSS 機能です。このドキュメント作成時点では、Chrome と Edge（115+）が animation-timeline: scroll() と view() をネイティブにサポートしています。Firefox と Safari はまだデフォルト設定でサポートを提供していないため、これを段階的な改善として扱ってください：エレメントの最終状態（to）を直接設定する @supports not (animation-timeline: view()) ブロックと組み合わせて使用すれば、非対応ブラウザでも要素が見えなくなるか画面外に留まるのではなく、理にかなった静的な結果を表示します。本番環境で使用する前に、必ず caniuse.com/css-scroll-timeline で現在の状態を確認してください。
使用方法
- プリセットを選択 — Fade In、Slide In（左/右/下）、Scale Up、Rotate In、または Reveal Clip Path。各プリセットは、
opacity/transform/clip-pathステップのfrom/toペアが既製で用意されています。 - タイムラインを選択 —
view()はエレメントがビューポートにスクロール入出するときにアニメート（「スクロール時に表示」エフェクトに最適）；scroll()はアニメーションを最寄りのスクロールコンテナの全体的なスクロール進度に結びつけます（プログレスバーやパラレックススタイルのエフェクトに最適）。 - アニメーション範囲を選択 — タイムラインのどの部分がアニメーションを再生するかを制御します。
entryやcoverなどの名前付き範囲は、エレメントがビューポートを通過する段階を記述し、view()用に設計されています；0% 100%などの単純なパーセンテージはいずれのタイムラインタイプでも機能します。 - 生成された CSS をコピーしてスタイルシートに貼り付けるか、
.cssファイルとしてダウンロードします。
FAQ
セレクタが .scroll-animate なのはなぜですか？
CSS を貼り付けられるように準備するためのプレースホルダーです — アニメーション化したいエレメントに合わせて名前を変更してください。
animation-range は実際に何を制御しますか？
スクロールタイムラインの一部をアニメーションの 0%–100% 進度にマップします。例えば、entry 0% cover 100% はエレメントがビューポートに入り始める瞬間にアニメーションを開始し、その entry フェーズを完全に覆う（スクロール過去）までに完了します。
animation-duration がないのはなぜですか？
スクロール駆動アニメーションは時計で実行されません — それらの「期間」は animation-range を通じてアニメーションに割り当てるスクロール範囲の量です。明示的な期間の設定は不要です（タイムラインメカニズムによって無視されます）。
このをまだサポートしていないブラウザではどうなりますか？
サポートがない場合、animation-timeline は単に無視されるため、エレメントはデフォルト状態（from）に留まります — 通常は見えないか、オフセットされています。エレメントの最終スタイルを静的フォールバックとして設定する @supports not (animation-timeline: view()) ブロックを追加してください。
opacity と transform 以上のものをアニメーション化できますか？
はい — @keyframes 内のあらゆるアニメーション可能な CSS プロパティが機能します。ここで Reveal プリセットで使用される clip-path を含みます。Transform と opacity は、コンポジターフレンドリーでありスクロール中もスムーズに保つため、優先されます。
プライバシー
すべてはブラウザで局所的に実行されます — 設定がデバイスを離れることはなく、CSS がサーバーに送信されて生成されることはありません。