WebサイトやLPを「良く見せたい」「ユーザーの視線を引きつけたい」
──そんな時に役立つのが CSS/JSアニメーション です。
今回は、コピペでそのまま使える 「CSS/JSアニメーション集10選」をまとめました。
デザインを邪魔せず、どのジャンルのサイトにも取り入れやすい動きを中心に掲載しているため、
ポートフォリオ・企業サイト・EC・サービス紹介ページなど、幅広い場面で活用できます。
制作にすぐ導入できる内容となっていますので、ぜひ気になるものから試してみてください。
ふわっとフェードイン
See the Pen ふわっとフェードイン by et (@eito-oda) on CodePen.
「ふわっとフェードイン」は、要素が静かに・柔らかく浮かび上がるように表示されるアニメーションです。
不意に飛び出すのではなく、自然な明るさと存在感を持って画面に溶け込むため、上品で落ち着いた演出ができます。スクロール連動で発動させることで、読み進めるたびに心地よくコンテンツが現れるリズムを作れるのが大きな魅力です。
特徴
・透明状態からゆっくりと可視化される柔らかい表示演出
・急激な動きがなく、ユーザー体験の邪魔にならない
・文字・画像・セクション全般に応用でき汎用性が高い
・一度だけ発動（once:true）により自然な読み進め感を演出
活用シーン
・見出しや本文、サムネイル・画像の表示演出
・サービス紹介やポートフォリオのセクション表示
・高級感・静かさ・洗練さを演出したいデザイン
・LPや企業サイトなど落ち着いたトーンの UI
メリット
・コンテンツの「存在感」を自然に伝えられる
・視線誘導を妨げず、読者のリズムを崩さない
・急な演出が苦手なユーザーにもストレスのない動き
・シンプルな構造でデザインへの馴染みが良い
「ふわっとフェードイン」は、柔らかな動きでコンテンツを自然に際立たせる王道アニメーションです。
派手さを出さずに洗練された奥行きを追加できるため、どの Web デザインにも導入しやすく、サイト全体のクオリティを底上げできます。
ふわふわ浮くポップアップ
See the Pen ふわふわ浮くポップアップ by et (@eito-oda) on CodePen.
スクロールで対象が表示領域に入ったタイミングで、下からふわっと浮き上がるようにポップアップするアニメーションです。拡大とフェードインが同時に起こることで、柔らかく存在感のある登場演出が完成します。
特徴
- 下方向から浮き上がるような軽やかな動き
- スケール（拡大）＋フェードインの組み合わせで柔らかい印象
- スクロール連動でユーザー視点に合わせて自然に出現
- GSAPによる滑らかで高品質なアニメーション
活用シーン
- セクションタイトルやコンテンツ見出しに
- 商品・サービス紹介や実績表示の登場演出
- 画像・カード・ボタンなどの存在感を高めたい場面
- CTA（購入・問い合わせボタン）の注目演出
メリット
- 優しい動きで好印象を与えやすい
- ユーザーの視線誘導がしやすく、離脱防止にも役立つ
- スタイリッシュで汎用性が高く、どのデザインにもなじむ
- GSAPで速度や距離調整が簡単にでき、カスタマイズ性も高い
「ふわふわ浮くポップアップ」は、下から柔らかく登場する浮遊感のあるアニメーションで、ユーザーに心地よい視線誘導を生み出します。派手すぎず洗練された演出のため、ビジネスサイト・ポートフォリオ・ブログなど幅広く活用できるのが魅力です。
斜めからのクリッピング
See the Pen 斜めからのクリッピング by et (@eito-oda) on CodePen.
スクロールで表示領域に入ったタイミングで、要素が斜め方向からクリッピング解除されながら現れるアニメーションです。右下側から斜めに切り開くように広がり、スタイリッシュで映像的な登場演出を実現できます。
特徴
clip-pathを利用したマスク効果で斜め方向から表示- 直線的な開閉ではなく、空間的でダイナミックな見え方
- GSAP × ScrollTriggerで滑らかな展開
- 要素に画像・テキスト・カードなど何でも対応
活用シーン
- セクションタイトルや見出しの印象的な表示に
- 画像やポートフォリオ作品のギャラリー演出
- サービス紹介・実績紹介のカードの登場アニメーション
- スクロールストーリーテリング系のページ
メリット
- 斜めの動きが「こだわり感・高級感」を演出できる
- 一般的なフェードインより視覚的インパクトが高い
- 色・角度・速度の調整で幅広い表現に応用可能
- マスク処理のため、コンテンツのレイアウトは崩れにくい
「斜めからのクリッピング」は、右下から切り開くように展開するクリッピング解除アニメーションで、シンプルながら高級感と躍動感のある登場演出を表現できます。画像・テキスト・カードなどジャンルを問わず使いやすく、サイト全体のデザインに強いアクセントを加えられるのが魅力です。
見出しの文字間隔を徐々に拡大
See the Pen 見出しの文字間隔を徐々に拡大 by et (@eito-oda) on CodePen.
スクロールに連動して見出しテキストの文字間隔（letter-spacing）が徐々に広がるアニメーションです。ページを読み進める動きとシンクロすることで、メッセージ性や奥行きを強調し、シンプルながら強い視覚的インパクトを与えられます。
特徴
- ScrollTriggerによりスクロール量に応じて滑らかに変化
- 文字そのものを拡大するのではなく「文字間隔」だけを広げるためスタイリッシュ
- 構造は
<h2>などの見出しだけで簡単に適用可能 - タイトル・キャッチコピーの演出に高相性
活用シーン
- ヒーローヘッダーでキャッチコピーを印象付けたい時
- クリエイティブサイト・ポートフォリオのセクションタイトル
- スクロール演出を軸としたストーリーデザイン
- 「シンプルだけど静かにかっこいい演出」を求めるページ全般
メリット
- 見出しの印象と存在感を強調できる
- 動きが繊細のため過剰にならず、どんなデザインにも馴染む
- CSSとGSAPだけで実装でき、負荷が低い
- 文字・フォント・速度を変えるだけで幅広い応用が可能
「見出しの文字間隔を徐々に拡大」は、スクロールと連動してタイトルのレター間隔が広がるアニメーションで、静かさと力強さを両立した表現ができる演出です。過度な装飾に頼らずサイトの雰囲気を格上げできるため、幅広いジャンルのウェブデザインで活用しやすいのが魅力です。
ミラーフリップ リフレクション
See the Pen ミラーフリップ リフレクション by et (@eito-oda) on CodePen.
「ミラーフリップ リフレクション」は、要素を左右反転させるように回転させるアニメーションです。Y軸方向に180度回転させ、鏡のように表と裏が切り替わる視覚効果が生まれます。GSAPのyoyo（行き来）動作により、途切れない循環アニメーションが実現でき、インパクトと動きのある表現を手軽に追加できます。
特徴
・左右へパタッと折り返すように反転する視覚効果
・単方向ではなく「往復」アニメーションとして動き続ける
・短時間でも存在感が強く、視線を引き寄せやすい
・CSSだけでは作りにくい滑らかさと立体回転の再現が可能
活用シーン
・Webサイトのロゴ・アイコンに動きを付けて印象を残したいとき
・UIの中の切り替え演出、ホバーアニメーション、ボタン強調など
・バナーやLPのメインビジュアルでインパクトある動きを入れたい場合
・スクロール中に「目印」となる視覚的フックが欲しいとき
メリット
・短いコードでもダイナミックな3D表現が可能
・サイト全体の雰囲気にモダン・ハイテク感をプラスできる
・常時アニメーションによる視認性アップで、誘導効果が高い
・サイズ・色・形を問わずほぼ全ての要素に適応できる
ミラーフリップ リフレクションは、手軽に「視線を奪う3D回転」を実現できるアニメーションです。要素を反転させるだけのシンプルな動きながら、印象は強く、注目を集めたい箇所に最適。アクセント演出としても、UIの装飾としても幅広く活用できます。
Vanta.js：網
See the Pen vanta.js：網 by et (@eito-oda) on CodePen.
「Vanta.js：網（NET）」は、Webサイト上に「動くワイヤーフレーム状の網」を描画するインタラクティブな背景アニメーションです。
マウスやタッチの動きに反応しながら、線と点がたわむように揺れ、奥行きのある3D視覚効果を演出します。設定コードもシンプルで、通常の背景画像を差し替える感覚で導入できるため、デザイン性の高いサイト制作で特に人気の高い背景演出です。
特徴
・点と線が網状に連動して動くダイナミックな背景演出
・ユーザーのマウスやタッチ操作に反応しインタラクション性が高い
・軽量で動作が滑らか（キャンバス描画ベース）
・背景として自然に溶け込みながらも存在感を持たせられる
・色・スピード・密度などカスタマイズ幅が広い
活用シーン
・ポートフォリオサイトやデザイナー・クリエイター系の洗練されたトップビジュアル
・テック系・IT企業・サービス・アプリ紹介ページの背景
・ヒーローヘッダーで静止画では出せない未来感・テクノロジー感を演出したい場合
・イベントやキャンペーンLPの「静かに動く背景」として雰囲気を強化
メリット
・画像や動画を使わずに高品質なアニメーション背景を実装できる
・サイトの雰囲気を一気に近未来・テク系に引き上げられる
・視差や動きによって滞在時間や興味関心が向上しやすい
・コード量が少なく、実装・カスタムが比較的簡単
Vanta.js「網（NET）」は、デザイン性と操作反応性を兼ね備えた背景アニメーションです。派手すぎず洗練された動きを演出できるため、UIを邪魔せずにサイトの世界観を引き上げたい場面で最適。コードによるカスタマイズ性も高く、表現力の幅が広いのが魅力です。
hoverで文字色変化
See the Pen hoverで文字色変化 by et (@eito-oda) on CodePen.
「hoverで文字色変化」は、カーソルを重ねた瞬間に文字色がふわっと変わるシンプルながら効果的なホバーアニメーションです。
リンク・ボタン・見出し・メニューなど、どんな文字要素にも使えるので汎用性が高く、UX向上に直結する装飾です。CSSだけで簡単に実装でき、サイトのブランドカラーやアクセントカラーを視覚的に伝えるのに最適です。
特徴
・カーソルホバー時に滑らかに文字色が変化
・CSSのみで実装でき、パフォーマンスが高い
・アクセントカラーを自然に見せられる
・トランジションで高級感を持たせることも可能
活用シーン
・メニュー・ナビゲーションのリンクに視認性と操作感を追加
・ボタンやCTA（お問い合わせ / 資料請求 など）の誘導力向上
・記事タイトル・見出し・カードリンクのアテンション強化
・ブランドカラーをさりげなくサイト全体に馴染ませたい場合
メリット
・誰でもすぐに使える簡単アニメーションでUXをワンランク向上
・文字の視認性とアクションの認知を強化でき、ユーザーの迷いを減らせる
・JavaScript不要のため動作が安定し、読み込み速度にも負担が少ない
・さまざまな要素に応用でき、デザイン統一にも役立つ
カーソル hover の文字色変化は、最小限の実装で最大の効果を発揮するアニメーションの一つです。
目立たせすぎず、しかし確実にユーザーのアクションを促すことができるため、UI/UX改善に悩むサイトでも取り入れやすい万能テクニックです。
縦横スクエアが動くグリッドローディング
See the Pen 縦横スクエアが動くグリッド by et (@eito-oda) on CodePen.
「縦横スクエアが動くグリッドローディング」は、3×3のスクエアがグリッド状に並び、個別に縮小・拡大しながらリズミカルにアニメーションするローディング演出です。
単調になりがちな「読み込み待ち」を視覚的に楽しく見せられ、軽量なCSSアニメーションのみで構築できるため、パフォーマンスを維持しつつ高いデザイン性を実現できます。
特徴
・3×3のグリッドが規則的に波打つようにアニメーション
・CSSのみで動作するので非常に軽量
・カラーやサイズ変更で世界観・ブランド感を演出できる
・幅・高さ 60px のコンパクトデザインでどこでも配置しやすい
活用シーン
・ページ読み込み・Ajax通信中・非同期処理の待機画面
・LP・商品ページの読み込み部分を印象的にしたい場合
・アプリ風インターフェイスやモダンデザインのWebサイト
・シンプルだが動きのあるローディングアニメーションを求める場面
メリット
・ユーザーの「待ちストレス」を軽減し、離脱防止に貢献
・画像不要・JavaScript不要で高速ロードしやすい
・グリッドレイアウトのためレスポンシブに調整しやすい
・色やアニメーションディレイ変更により無限にバリエーション展開が可能
「縦横スクエアが動くグリッドローディング」は、軽量・美しい・汎用性が高いローディングアニメーションの代表格です。わずかなコードで実装でき、ユーザー体験の質を確実に向上させられるため、初級〜上級クリエイターまで幅広くおすすめの表現です。
複数の要素を時間差で奥からズームイン
See the Pen 複数の要素を時間差で奥からズームイン by et (@eito-oda) on CodePen.
「複数の要素を時間差で奥からズームイン」は、テキストやパーツが奥（縮小状態）からふわっと拡大しながら1つずつ順番に登場するアニメーションです。
単一の表示ではなく「時間差演出」を取り入れることで、読み進めたくなるリズム感や期待感を生み出し、視線誘導に優れたモダンなスクロールアニメーションを構築できます。
特徴
・複数の要素が「縮小 → 等倍」へズームしながら順番に表示
・stagger設定により登場タイミングのずれを自然に演出
・奥から湧き出るような表示のため視線誘導・印象付けに強い
・GSAPによるなめらかな動作でクオリティの高いアニメーション
活用シーン
・サービス紹介・商品特徴の箇条書きが続くセクション
・段階的に情報を見せたいコンテンツ（ステップ説明・料金表など）
・キャッチコピー → サブコピー → CTA など順に見せたいページ構成
・複数要素の登場にリズムを持たせ、滞在率を高めたい場合
メリット
・一気に表示するよりも読みやすく、内容が頭に入りやすい
・「動きの流れ」を作ることで視覚的な没入感を生む
・コードの調整が少なく、stagger値やscale調整で雰囲気を変更できる
・静的ページにも動的コンテンツにも幅広く適用しやすい
「複数の要素を時間差で奥からズームイン」は、シンプルな構造ながら視線誘導・訴求力の向上に役立つ強力なアニメーションです。テキストやボックスを順番に浮かび上がらせることで、読みやすさと印象の両方を高められ、ページの流れを「スムーズかつ魅力的に」演出できます。
スマッシュポップアップ
See the Pen スマッシュポップアップ by et (@eito-oda) on CodePen.
「スマッシュポップアップ」は、画面外の下方向から勢いよく跳ね上がるように出現するポップアップアニメーションです。通常のフェードインよりもインパクトがあり、視線を一気に引きつける「力強い登場演出」を作りたい場面に最適です。
下からの移動・縮小状態からの拡大・弾むような easing が組み合わさることで、メリハリのあるダイナミックな表現になります。
特徴
・要素が下方向から一気にジャンプするように出現
・y移動 + scale + opacity の組み合わせで破裂感のある出方
・「back.out(2)」による強い弾みで印象的なポップアップ
・短時間でテンポよく見せられる軽快なアニメーション
活用シーン
・アイキャッチ要素やキービジュアルを目立たせたい場面
・CTAボタン、特典情報、キャンペーン告知など強調したい要素
・サービス特徴・料金表など重要ポイントの見せ場
・コンテンツの切り替えポイントで気持ちの高まりを演出
メリット
・動きに勢いがありクリック・視認率向上につながりやすい
・ページに「動きの強弱」が生まれ、単調さを解消できる
・アニメーション時間が短いため UX を損なわずにアクセント追加可能
・設定値（ease・scale・距離）調整で多様なテイストに変化
「スマッシュポップアップ」は、ただ表示するのではなく「弾けて登場させる」ことでページにインパクトを与え、重要要素を自然と目立たせられるアニメーションです。視線誘導にも効果的で、強調ポイントの演出として取り入れるだけでもサイト全体の印象が大きく変わります。
まとめ
アニメーションは、派手さよりも 「適切な場面で、適切な動きを使うこと」が大切です。
ほんの少し動きを加えるだけでも、サイトの印象・読みやすさ・使いやすさは大きく変わります。
今回紹介したアニメーションはどれも 軽量・シンプル・汎用性が高い ものばかりです。
動きのあるレイアウトを少し加えるだけでも、サイト全体の雰囲気がぐっと明るくなることがあります。
ぜひ、制作されているプロジェクトの中で、合いそうな場面があれば取り入れてみてください。
