WebサイトやLPを「良く見せたい」「ユーザーの視線を引きつけたい」
──そんな時に役立つのが CSS/JSアニメーション です。

今回は、コピペでそのまま使える 「CSS/JSアニメーション集10選」をまとめました。

デザインを邪魔せず、どのジャンルのサイトにも取り入れやすい動きを中心に掲載しているため、
ポートフォリオ・企業サイト・EC・サービス紹介ページなど、幅広い場面で活用できます。

制作にすぐ導入できる内容となっていますので、ぜひ気になるものから試してみてください。

目次
  1. 文字や要素をバラバラにフェードイン
  2. 回転しながら拡大
  3. 3本スライドマスクで画像が出現
  4. 横スライドでセクションを「スッと現す」
  5. レインボーバー反復スライド
  6. 3Dキューブの回転アニメーション
  7. 矢印が右に動く
  8. hoverでテキストカラーと背景色が左から変化するアニメーション
  9. hoverでぼかした状態から元に戻す
  10. 回転するリングローディング
  11. まとめ

文字や要素をバラバラにフェードイン

See the Pen 文字や要素を順番にフェードイン by et (@eito-oda) on CodePen.

テキストやパーツを一斉にではなく、1つずつ時間差でふわっと現れるアニメーションです。

単語・文字・画像・アイコンなど、どんな要素でも個別にフェードインできるため、読みやすさと視覚的リズムが向上。GSAPとScrollTriggerを用いることで、スクロールに合わせた自然で洗練された登場演出を実現します。

特徴

  • 要素をひとつずつズラしながらフェードインさせる「段階的表示アニメーション」
  • スクロール位置に連動して発動するため、読み進める体験にストーリー性を付与
  • GSAPの stagger によりスムーズで統一感のある時間差演出が可能
  • 文字／単語／ボタン／画像などほぼ全ての要素で応用できる

活用シーン

  • ファーストビューのキャッチコピーや紹介文の登場演出
  • サービス紹介ページの特徴一覧やカードレイアウト表示
  • ポートフォリオやLPで力を入れたいメッセージ・実績紹介部分
  • 企業理念やブランドストーリーなど「印象に残したい文章」に最適

メリット

  • 短時間の動きでも「丁寧に見せている」印象を与え、クオリティ感アップ
  • 読み手の視線誘導に役立ち、文章が最後まで読まれやすい
  • 表示タイミングがスクロール連動のため、ページ滞在時間の向上にも貢献
  • アニメーション量を変えるだけで柔らかい演出〜ダイナミックな演出まで対応可能

バラバラにフェードインするアニメーションは、文字・画像・要素の魅力を最大化しながら読みやすさも両立できる演出です。実装の手間は少なく、体感品質の向上に大きく貢献するため、LP・企業サイト・ポートフォリオなど幅広く活用できます。

回転しながら拡大

See the Pen 回転しながら拡大 by et (@eito-oda) on CodePen.

要素がくるっと回転しながらスッと大きくなって現れるインパクト系アニメーションです。

静止状態から一気に登場するため視線を強く引きつけ、重要コンテンツの存在感を高めます。GSAPとScrollTriggerを使うことで、スクロール量に応じて自然なタイミングでアニメーションを発動でき、ページ遷移なしでもメリハリのある演出を実現できます。

特徴

  • 回転＋拡大の複合モーションでインパクトのある登場表現
  • 単なるフェードインよりも視覚的訴求力が高く、認知を強調
  • GSAPにより滑らかでスタイリッシュな動きを実現
  • スクロール連動のため「注目してほしい位置」で確実に発動

活用シーン

  • サービスのメインアイコン・ロゴ・数字・実績カウンターの登場
  • CTAボタンやキャンペーンカードの見せ場
  • LPの区切りポイント、特典訴求、アピールコンテンツ
  • プレゼンテーション形式のサイトでの要素登場演出

メリット

  • 強い印象を与えるため記憶に残りやすい
  • ページのリズム感が生まれ、スクロール体験が退屈にならない
  • GSAPのみで簡潔に実装でき、デザインテイストを選ばない
  • 他モーションより強調度が高く、コンバージョンにも寄与しやすい

回転しながら拡大するアニメーションは、ユーザーの視線を一気に惹きつけたい場面で威力を発揮する演出です。スクロールに合わせて自然に発動するため、LP・販促サイト・キャンペーンページなど重要要素を効果的に目立たせたいシーンに特におすすめです。

3本スライドマスクで画像が出現

See the Pen 3本スライドマスクで画像が出現 by et (@eito-oda) on CodePen.

白いバーが3枚スライドしながら上方向へ抜けていき、その下から画像が徐々に現れる視覚的インパクトの強いマスク演出です。画像の登場を「隠す→見せる」プロセスで演出することで、通常のフェードインよりも期待感や演出性を高められます。GSAPとScrollTriggerを組み合わせることで、スクロールしたタイミングに合わせて自然に発動できます。

特徴

  • 3枚の縦スリットが順番にスライドして画像を露出させるスタイリッシュな演出
  • スタティックな画像でも映像的・CM的登場表現が可能
  • スタガー制御により連続動作のリズム感を演出
  • 背景画像が動かないため情報デザインの邪魔にならない

活用シーン

  • LPやサービス紹介ページのキービジュアルやセクション導入
  • プロダクト写真や実績画像の印象的な見せ方
  • ポートフォリオサイトのギャラリーパネル登場アニメーション
  • スクロール演出を強調したいページ構成の差し込み演出

メリット

  • 「画像を魅せる」効果が高く、ユーザーの注意を確実に誘導できる
  • モダン・洗練された印象を演出でき、デザイン性の向上にも貢献
  • GSAPのシンプルなコードで滑らかな動きを再現できる
  • バーの数・方向・色変更など、アレンジ性が高い

3本のスライドマスクで画像を出現させる演出は、視線を強く引きつけたいビジュアルエリアに最適です。スクロール発火で自然に動くため、LP・ブランドサイト・ポートフォリオなど映像的な見せ方を求める場面で効果を発揮します。静止画像でもインパクトを高めたいときにおすすめのアニメーションです。

横スライドでセクションを「スッと現す」

See the Pen 横スライドでセクションを「スッと現す」 by et (@eito-oda) on CodePen.

右側から段階的にマスクが外れ、内容が「スッと滑り出すように」表示される、視覚的に心地よいセクション登場アニメーションです。フェードや単純なスライドとは違い、clip-path を利用して要素の覆いを横方向に解除していくため、ページ全体に洗練された動きの流れを作りやすく、情報がきれいに整理されて見えます。ScrollTriggerによりスクロール位置と連動し、自然なタイミングで発動します。

特徴

  • clip-path を使い、右側から横方向にマスクが解除される滑らかな reveal 表現
  • 「隠す → 見せる」の演出により、視線誘導と期待感を両立
  • スクロール量に応じて動くため違和感がなく視覚的心地よさが高い
  • 余計な動きを足さず、落ち着いた UI を保ちながら存在感を演出できる

活用シーン

  • セクションタイトルや概要文など、ページの区切りを印象的に見せたい場面
  • LP・会社サイト・サービスサイトの特徴紹介ブロック
  • 見せすぎず、情報を丁寧に順番に伝えたいコンテンツ構成
  • コーポレートや落ち着いたデザインのサイトでの洗練されたアニメーション演出

メリット

  • アニメーションが派手すぎず上品なため、どんなデザインにも馴染む
  • 情報ブロックの登場にストーリー性が生まれ、読了率向上に期待できる
  • JS・CSSが少量で実装でき、ページパフォーマンスを損ないにくい
  • 横 → 縦・反転・速度調整などアレンジの幅も広い

横スライドマスクによるセクション表示は、「情報を丁寧に見せたい」「落ち着いたサイトに自然な動きを加えたい」という場面に最適。視線誘導・可読性・デザイン性のバランスが良く、LPや企業サイトの演出に特に向いています。派手さを抑えつつ「印象に残る登場感」を演出したいときにおすすめのアニメーションです。

レインボーバー反復スライド

See the Pen レインボーバー反復スライド by et (@eito-oda) on CodePen.

横一線のレインボーカラーがゆっくりと流れていく、視覚的インパクトの強いアニメーションです。

背景のグラデーションを大きく設定し、background-position を連続的に動かすことで「虹色がずっと流れている」ように見せています。派手さがありながら上品な動きで、サイトのアクセントやセクションの仕切りに使うだけでデザイン性が大きく向上します。

特徴

  • レインボーグラデーションが横方向に無限ループで流れ続ける演出
  • 動きは滑らかで視認性が高く、装飾的でも違和感が出にくい
  • バー幅・スピード・色・ループ方式を自由にカスタムできる
  • テキストなしでも成立するため UIラインやテーマデザインに役立つ

活用シーン

  • セクション境目のアクセントライン・区切り線として
  • ローディングや準備画面の演出
  • 「ポップ／デジタル／テクノ系」などの雰囲気を表現する装飾エフェクト
  • 企画サイト・イベントサイト・ゲーム/音楽ジャンルのデザイン強調

メリット

  • たった 1要素＋数行の GSAP だけで完成し、コスパが高い
  • 繰り返し演出のため静止状態がなく「動きのあるサイト」という印象を与えられる
  • 文字や背景を邪魔せず装飾として自然に馴染む
  • カラーパターンを変えるだけで雰囲気の方向性を瞬時に変えられる（例：ネオンサイバー、パステル、メタル系など）

レインボーバー反復スライドは、コンテンツを邪魔せずに画面に「動いている感・ワクワク感」を追加できる優秀なアクセント演出。

細いバー一つでも UI全体の雰囲気がガラッと変わるため、印象強化や世界観づくりに適しています。スピードと色を調整すればどのジャンルのサイトにも応用しやすいアニメーションです。

3Dキューブの回転アニメーション

See the Pen 3Dキューブの回転アニメーション by et (@eito-oda) on CodePen.

6面体のキューブが立体的に回転し続ける3Dアニメーションです。

CSS による transform-style: preserve-3d と perspective を使って奥行きを再現し、GSAPで rotationX と rotationY を同時に回転させることで、空間の中を立方体が回り続けるような演出を実現しています。サイトに未来感やデジタル感をプラスしたいときに効果的な視覚演出です。

特徴

  • 正面・側面・上面のすべてが見える本格3D表現
  • X軸・Y軸の同時回転で立体感のあるダイナミックな動き
  • 回転スピード・軸の方向・ループ有無などの調整が容易
  • 背景や要素の影響を受けにくく単体で成立するデザイン

活用シーン

  • ヒーローヘッダーの目を引くビジュアルとして
  • サービス紹介や技術力アピールに使う「視覚的シンボル」
  • Web制作・IT・AI・システム開発・ゲームジャンルの世界観演出
  • クリック誘導やスクロール誘導のマスコット的オブジェクト

メリット

  • 3D表現ながらコード量は少なく、導入コストが低い
  • 立体アニメーションによりサイト全体のクオリティを引き上げられる
  • カラーや各面のテキスト・画像を入れ替えるだけで用途が広がる
  • GSAPのループ制御で負荷を抑えつつ滑らかなアニメーションを実現

3Dキューブの回転アニメーションは、「未来感・スタイリッシュ・デジタル」の雰囲気づくりに抜群のアニメーション。視線誘導にもビジュアルアクセントにも使える万能表現で、配置するだけでサイトに先進的な印象を与えられます。面の内容を自由に変えられるため、発展性・汎用性の高いエフェクトです。

矢印が右に動く

See the Pen 矢印が右に動く by et (@eito-oda) on CodePen.

ボタンホバー時に矢印が右方向へスライドするアニメーションは、リンクの誘導性を高めるためによく使用されるUI演出です。

ボタンの中にある矢印が微妙に右へ動くだけのシンプルな動きですが、視線を自然に「右＝進む・次へ」の方向に促す効果があり、クリック率改善にもつながります。モーションは軽量で、CSSのみで実装できるのも大きな魅力です。

特徴

  • ホバー時の矢印の移動によって「押せるボタン」であることが直感的に伝わる
  • カーソルの動きに反応してアニメーションするため操作性が高い
  • 装飾しすぎず、どんなサイトデザインにも馴染みやすい
  • 矢印の動きが 0.3s と短く、ストレスを与えない軽快な演出

活用シーン

  • CTAボタン（資料請求、問い合わせ、予約、購入など）
  • 「次へ」「詳細を見る」「もっと見る」などの導線リンク
  • カードリンクのホバー演出
  • スマホUIでも視認性を高めたいボタン

メリット

  • 自然とクリック・タップしたくなる導線演出として効果的
  • CSSのみで動作するため、負荷が軽く高速
  • デザイン性を損なわず、アクセントとして追加しやすい
  • ユーザーの視線誘導とUX向上に貢献

矢印が右に動くアニメーションは、シンプルながらクリック誘導の効果が高く、サイトの回遊性やコンバージョン向上に役立つUI演出です。余計な装飾を加えず、自然に行動を促す動きを入れたい場面で特におすすめです。

hoverでテキストカラーと背景色が左から変化するアニメーション

See the Pen hoverでテキストカラーと背景色が左から変化するアニメーション by et (@eito-oda) on CodePen.

ホバー時に背景色と文字色が左から右へと切り替わるアニメーションは、視覚的インパクトが高く、ユーザーの操作に反応するリッチなボタン演出です。

mix-blend-mode（描画モード）を利用することで、背景レイヤーがスライドしながら文字色も同時に反転するように見せられ、CSSのみで実現できるのが大きな魅力。見た目の派手さと機能性を両立し、マウスオーバーで「変化する楽しさ」を生むUI表現です。

特徴

  • 背景が左から右に広がり、同時にテキストカラーも切り替わる動き
  • mix-blend-modeによる視覚的なノイズのない綺麗な色反転演出
  • アニメーションは0.3秒で軽快、ユーザーにストレスを与えない
  • CSSのみで完結し、JavaScript不要で実装が簡単

活用シーン

  • CTAボタン・リンクテキスト・ラベルのホバー演出
  • キービジュアルやサービス紹介ページなど視覚的訴求が必要なパート
  • 「もっと見る」「詳細を見る」などのクリック誘導リンク
  • シンプルなUIにアクセントを追加したい場面

メリット

  • 動きで注目を集められ、アクション誘導力が高まる
  • 背景と文字の色反転で視認性が向上し、押せる要素だと直感的に伝わる
  • カラー変更も簡単で、ブランドカラーに合わせやすい
  • 実装が軽いのでパフォーマンスへの負担が少ない

背景と文字色が左から順番に切り替わるアニメーションは、情報を強調しつつも洗練された印象を与えるUI演出。リンクのクリック率向上に効果があり、ビジュアル性と使いやすさの両方を高めたいWebサイトに最適です。

hoverでぼかした状態から元に戻す

See the Pen hoverでぼかした状態から元に戻す by et (@eito-oda) on CodePen.

ホバーで画像のぼかしを解除するアニメーションは、最初に「意図的にぼかした状態」で表示し、マウスオーバー時にクリアな映像へ変化させることで視線を誘導する演出です。

非アクティブ時のぼかしによって注目を引き、軽快なホバーアクションによって「触ってほしい」要素であることを自然に伝える効果があります。CSSのfilterプロパティとtransitionだけで実装でき、滑らかな視覚体験を実現できるのも魅力です。

特徴

  • filter: blur() を使用したシンプルで高品位な視覚効果
  • ホバーでぼかしが解除され、画像がシャープに表示
  • アニメーション時間は0.3秒で、操作性を損なわない滑らかな変化
  • CSSのみで完結、JavaScript不要で導入できる

活用シーン

  • ギャラリーやポートフォリオサイトのサムネイル演出
  • Before → After表現やコンテンツ解放風のUI演出
  • 商品画像やプロジェクト写真をクリック誘導する際の視線誘導
  • アイキャッチエリアでの「気になる演出」要素として

メリット

  • 初期表示から注目を集められ、ユーザーを自然に操作へ誘導できる
  • ぼかし量を調整するだけで演出の強弱のコントロールが可能
  • CSSだけで軽量に動き、ページパフォーマンスを維持
  • ほかのホバーエフェクト（拡大・暗淡・テキスト表示など）との組み合わせも相性抜群

ぼかし状態から鮮明な画像へ切り替えるホバーアニメーションは、ユーザーの注意を自然に引きつけ、クリックや閲覧への導線を強化する効果的なUI演出。実装の手軽さに対して視覚インパクトが大きく、ギャラリー系サイトから企業サイトまで幅広く利用できる万能アニメーションです。

回転するリングローディング

See the Pen 回転するリング by et (@eito-oda) on CodePen.

回転するリングローディングは、円形フレームが一定速度で回転し続けることで「読み込み中」を視覚的に示す代表的なアニメーションです。

CSSアニメーションだけで実現でき、軽量で表示速度にも優れているため、Webサイト・アプリ問わず幅広く採用されています。ユーザーが待機状態にストレスを感じないよう、動きを与えて安心感・進行感を与えるUI要素として有効です。

特徴

  • border と border-top を利用したシンプル構造で実装可能
  • CSSのアニメーション（@keyframes）のみで無限回転を実現
  • 画像やSVG不要で、読み込みを妨げない超軽量エフェクト
  • 色・太さ・速度・サイズ変更が簡単でカスタマイズ性が高い

活用シーン

  • Ajax処理やフォーム送信時など、バックエンド待機画面のローディング表示
  • SPA（シングルページアプリ）などページ遷移のないサイトの読み込み演出
  • スライダー・フェッチ・API通信などの非同期処理の待機アイコン
  • アプリ・ECサイト・予約サイトなどユーザーの「処理中」不安を解消したい場面

メリット

  • 読み込み中でもユーザーが離脱しづらくなり、体験の質を向上できる
  • フレームワークやライブラリを問わずどの環境でも使える
  • 極めて軽量で、ページパフォーマンスを損なわない
  • 配色や太さを変えるだけでブランドカラーに簡単に統一できる

回転するリングローディングは、CSSだけで実装できる軽量かつ視認性の高いローディングアニメーション。待機時間を視覚的にカバーし、ユーザーの離脱防止・安心感の向上に繋げられる定番UI演出です。

まとめ

アニメーションは、派手さよりも 「適切な場面で、適切な動きを使うこと」が大切です。
ほんの少し動きを加えるだけでも、サイトの印象・読みやすさ・使いやすさは大きく変わります。

今回紹介したアニメーションはどれも 軽量・シンプル・汎用性が高い ものばかりです。
動きのあるレイアウトを少し加えるだけでも、サイト全体の雰囲気がぐっと明るくなることがあります。

ぜひ、制作されているプロジェクトの中で、合いそうな場面があれば取り入れてみてください。