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

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

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

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

目次
  1. 左から右へマスクが滑るように広がり、文字が徐々に現れる
  2. 下からニュッと
  3. 四角形が広がって出現
  4. サムネイル画像の拡大（ズームイン）
  5. テキストのマルチカラーウェーブ（文字ごとに波が流れる）
  6. Vanta.js：霧
  7. hover時左下の色が右に広がっていく
  8. hoverで文字色と背景色変更
  9. hoverで画像の上にマスクを付与
  10. 波形バーローディング
  11. まとめ

左から右へマスクが滑るように広がり、文字が徐々に現れる

See the Pen 左から右へマスクが滑るように広がり、文字が徐々に現れる by et (@eito-oda) on CodePen.

左から右へマスクがスライドするテキストアニメーションは、文字がマスクに覆われた状態から徐々に現れる演出です。

スクロールに連動させることで、自然な読み進め感を与えつつ、注目度の高い見出しを作ることができます。GSAPのclip-pathアニメーションを用いることで、滑らかで軽量な表現を実現可能です。

特徴

  • clip-path を利用した滑らかなマスクアニメーション
  • 文字や要素が徐々に現れるため、インパクトと視認性を両立
  • スクロール連動型で自然なタイミングで発動
  • CSSとGSAPで軽量に実装可能

活用シーン

  • セクション見出しや記事タイトルのアニメーション
  • ランディングページのキャッチコピー演出
  • 新商品・キャンペーン告知など、ユーザーの目を引きたい部分
  • スクロールアニメーションと組み合わせたストーリーテリング

メリット

  • ユーザーの注目を集めやすく、視線誘導に有効
  • 軽量でパフォーマンスに優れ、ページ速度を損なわない
  • 他のアニメーションと組み合わせて多彩な表現が可能
  • テキストの表示タイミングを自由にコントロールできる

左から右へのマスクスライドで文字を徐々に表示する見出しは、スクロール連動で自然に発動し、視覚的なインパクトと読みやすさを両立した演出。記事やLPの印象を強化する軽量で使いやすいアニメーションです。

下からニュッと

See the Pen 下からニュッと by et (@eito-oda) on CodePen.

「下からニュッと」は、スクロール時に要素が下からゆっくりと現れるアニメーションです。

GSAPのアニメーションを用いて、縦方向の移動とスケールを組み合わせることで、自然で立体感のある出現効果を実現します。シンプルながら目を引く演出として人気のある手法です。

特徴

  • 下方向から上にスムーズに出現するアニメーション
  • スケール変化を伴い、立体感とインパクトを付与
  • スクロールに連動して発動するため自然なタイミングで表示
  • GSAPを使用して軽量かつ滑らかに実装可能

活用シーン

  • セクション見出しやカードコンテンツの表示
  • LPや記事の注目ポイント演出
  • 商品やサービスの紹介パーツ
  • ユーザーのスクロールに合わせた段階的表示

メリット

  • ユーザーの視線を自然に誘導できる
  • シンプルながら動きにインパクトがある
  • 軽量でパフォーマンスへの影響が少ない
  • 他のスクロールアニメーションと組み合わせやすい

「下からニュッと」は、スクロールに合わせて下から上に要素が現れるシンプルかつ印象的なアニメーション。記事やLPで視線を誘導したい箇所に最適で、自然な立体感と動きでユーザーの注目を集められる演出です。

四角形が広がって出現

See the Pen 四角形が広がって出現 by et (@eito-oda) on CodePen.

「四角形が広がって出現」は、スクロール時に四角形の要素が中心から外側に広がるように現れるアニメーションです。GSAPを用いてclip-pathを操作することで、滑らかでモダンなマスク演出を実現。注目度の高い見せ方としてコンテンツにアクセントを加えられます。

特徴

  • 中心から外側に広がる四角形マスクで出現
  • スクロール連動で自然なタイミングで表示
  • clip-pathを使用し、CSSだけで滑らかに制御可能
  • モダンで洗練された演出が可能

活用シーン

  • セクション見出しやカードコンテンツの導入
  • LPや記事内での注目ポイント演出
  • 画像やテキストのフェードインと組み合わせ
  • ポートフォリオやサービス紹介ページ

メリット

  • シンプルながら視覚的にインパクトがある
  • スクロールに連動して自然な演出が可能
  • 他のアニメーションと組み合わせやすい
  • 軽量でパフォーマンスへの影響が少ない

「四角形が広がって出現」は、中心から外側に広がるマスク効果でコンテンツをスタイリッシュに表示するアニメーション。視線を集めたい箇所に最適で、シンプルながら印象的な演出を実現できます。

サムネイル画像の拡大（ズームイン）

See the Pen サムネイル画像の拡大（ズームイン） by et (@eito-oda) on CodePen.

スクロールに合わせてサムネイル画像が徐々に拡大するズームインエフェクトです。視覚的に注目を集めつつ、自然な動きでコンテンツを印象付けられます。

特徴

  • スクロールに連動して画像が拡大（ズームイン）するアニメーション
  • GSAPのScrollTriggerで滑らかに実装可能
  • 初期状態では縮小表示され、スクロールで元のサイズに戻る
  • 画像のサイズやスピードは簡単に調整可能

活用シーン

  • サムネイル画像の注目演出
  • ポートフォリオサイトやギャラリーのビジュアル強化
  • 商品紹介やキャンペーンページでの視覚的アピール
  • スクロール連動の動きでUXを向上させたい場面

メリット

  • 視覚的にインパクトがありユーザーの目を引きやすい
  • 簡単に導入でき、既存の画像コンテンツを活かせる
  • スクロールに応じた動きで自然な演出が可能
  • ページ全体の動きに統一感を与えられる

サムネイルのズームインエフェクトは、スクロールに連動する動きでユーザーの視線を誘導し、コンテンツの注目度を高めます。ポートフォリオや商品紹介など、画像を中心に魅せたいページで特に効果的です。

テキストのマルチカラーウェーブ（文字ごとに波が流れる）

See the Pen テキストのマルチカラーウェーブ（文字ごとに波が流れる） by et (@eito-oda) on CodePen.

「テキストのマルチカラーウェーブ」は、文字ごとに波のように上下動しながら色が変化するアニメーションです。CSSアニメーションを使って文字単位でタイミングをずらすことで、動きのある楽しい演出を実現します。目を引く見出しとして、ページのアクセントに最適です。

特徴

  • 文字ごとに波のように上下に動く
  • 半分のタイミングで色が変化するマルチカラー表現
  • CSSのみで実装可能、軽量で滑らかなアニメーション
  • タイミングをずらすことで連続した波の動きを表現

活用シーン

  • トップページやヒーローヘッダーの見出し
  • ポップで動きのあるブログタイトル
  • キャンペーンやイベントページの目立たせたい文字
  • ゲームやエンタメ系サイトのアクセント表現

メリット

  • ページの印象を楽しく活発にできる
  • CSSだけで軽量に実装可能
  • 文字単位で動きがあるため視認性を損なわない
  • 他のアニメーションと組み合わせて多彩な表現が可能

「テキストのマルチカラーウェーブ」は、文字ごとの上下運動と色変化で、見出しをポップに演出できるアニメーションです。視線を集めたい箇所に効果的で、サイト全体の印象を活気づけるデザインに向いています。

Vanta.js：霧

See the Pen vanta.js：霧 by et (@eito-oda) on CodePen.

「Vanta.js：霧」は、Webページ上に動きのある霧のアニメーションを簡単に実装できるライブラリです。

Three.jsをベースにしており、インタラクティブな背景として自然で幻想的な演出を与えます。マウスやタッチ操作に反応する設定も可能で、動的なビジュアルを簡単に追加できます。

特徴

  • リアルタイムで生成される動的な霧の背景
  • マウスやタッチ操作に応じて変化するインタラクティブ性
  • Three.jsベースで軽量かつ滑らか
  • 設定項目が多く、色や濃さ、速度などカスタマイズ可能
  • コード数行で簡単に導入できる

活用シーン

  • トップページやヒーローヘッダーの背景
  • LP（ランディングページ）の視覚的アクセント
  • ゲーム系やテクノロジー系のサイト演出
  • 幻想的・神秘的な雰囲気を出したいWebデザイン

メリット

  • 訪問者に印象的でインパクトのある演出を提供できる
  • コーディングの手間をほとんどかけずに高品質なアニメーションを実装可能
  • 軽量かつブラウザ負荷が少ない
  • 既存コンテンツと組み合わせやすく、汎用性が高い

「Vanta.js：霧」を使えば、Webページに簡単に幻想的で動きのある背景を追加可能です。操作に応じて動くインタラクティブ性もあり、サイト全体の印象を引き上げる視覚演出に最適です。

hover時左下の色が右に広がっていく

See the Pen hover時左下の色が右に広がっていく by et (@eito-oda) on CodePen.

このアニメーションは、リンクやボタンにマウスを乗せると、左下から右上方向に背景色がスライドして広がり、テキストの強調を演出するエフェクトです。

CSSの擬似要素とトランスフォームを活用しており、視覚的に動きのあるボタン表現を簡単に実装できます。

特徴

  • ホバー時に左下から右上に色がスライドして広がる
  • 擬似要素 ::before を使用して滑らかな動きを表現
  • ボタン全体が強調され、ユーザーの目を引くデザイン
  • 色や角度をカスタマイズ可能で柔軟に対応
  • CSSトランジションで軽量かつ高速表示

活用シーン

  • CTA（Call To Action）ボタンの装飾
  • リンクやナビゲーションメニューの強調
  • LP（ランディングページ）やサービス紹介ページ
  • ユーザーインタラクションを視覚的に誘導したい場面

メリット

  • ユーザーの視線を自然に誘導できる
  • CSSのみで実装可能、JavaScript不要で軽量
  • サイトデザインにアクセントを付けられる
  • 簡単にカスタマイズしてブランドカラーに対応可能

左下から右上に色が滑るホバーエフェクトは、ボタンやリンクに動きを与え、クリック誘導を強化します。軽量かつ簡単に導入できるため、CTAやナビゲーションなど幅広い場面で効果的に活用できます。

hoverで文字色と背景色変更

See the Pen hoverで文字色と背景色変更 by et (@eito-oda) on CodePen.

このアニメーションは、マウスホバー時に文字色と背景色がスムーズに切り替わるシンプルで使いやすいエフェクトです。文字を際立たせつつ、ユーザーの視線を自然に誘導できるデザインです。

特徴

  • ホバー時に文字色と背景色が同時に変化
  • CSSの transition で滑らかな色変化を実現
  • シンプルで軽量、どんなデザインにも馴染みやすい
  • 色や文字サイズを自由にカスタマイズ可能

活用シーン

  • ナビゲーションメニューやボタンの装飾
  • CTA（Call To Action）の強調
  • ブログ記事内のリンクや見出しのアクセント
  • ユーザーインタラクションを直感的に示したい場面

メリット

  • CSSだけで簡単に実装可能
  • サイトのパフォーマンスに影響を与えない軽量デザイン
  • ユーザーの操作感を向上させる視覚的フィードバック
  • ブランドカラーに合わせてカスタマイズ可能

文字色と背景色がホバーで変化するエフェクトは、リンクや見出しをシンプルに強調できる優れた手法です。軽量で実装も簡単なため、あらゆるウェブページで活用できます。

hoverで画像の上にマスクを付与

See the Pen hoverで画像の上にマスクを付与 by et (@eito-oda) on CodePen.

このアニメーションは、画像の上にマスクを重ね、ホバー時にマスクが半透明で現れることで視覚的な強調を加えるエフェクトです。シンプルながらも印象的な演出が可能です。

特徴

  • 画像上にカラーの半透明マスクを重ねる
  • ホバー時のみマスクが現れ、画像を柔らかく強調
  • CSSの transition を使った滑らかな表示切替
  • 色や透明度を自由にカスタマイズ可能

活用シーン

  • ギャラリーやポートフォリオでの画像強調
  • 商品画像やバナーに視覚的アクセントを追加
  • ブログ記事内のサムネイルやリンク装飾
  • ユーザーの注目を集めたい場面

メリット

  • CSSだけで簡単に実装可能
  • ページの読み込みや動作に負荷をかけない軽量デザイン
  • シンプルで直感的なインタラクションを提供
  • ブランドカラーやテーマに合わせて柔軟に調整可能

ホバーで画像上にマスクを表示するエフェクトは、ギャラリーや商品ページなどで画像を強調するのに最適です。軽量かつ簡単に導入でき、ユーザーの目を自然に誘導できます。

波形バーローディング

See the Pen 波形バー by et (@eito-oda) on CodePen.

このローディングアニメーションは、複数のバーが波のように上下に揺れることで、動的でリズミカルな印象を与えるデザインです。短時間で進捗感や動きを視覚的に伝えられます。

特徴

  • 複数のバーが順番に上下する波形アニメーション
  • CSSアニメーションのみで軽量に実装可能
  • 各バーのアニメーションに遅延を設定し、連続した波を表現
  • 色やバーのサイズ、アニメーション速度を自由に変更可能

活用シーン

  • ページやコンテンツの読み込み中のローディング表示
  • データ処理やファイル読み込み中の視覚的フィードバック
  • アプリやウェブサービスの待機画面演出
  • 動きのあるアクセントを加えたい場面

メリット

  • 軽量で簡単に導入できる
  • ユーザーに進捗や待機時間を直感的に伝えられる
  • 色やサイズのカスタマイズでブランドに合わせやすい
  • リズミカルな動きで視覚的に楽しい演出が可能

波形バーローディングは、シンプルながら視覚的に動きを演出できるCSSアニメーションです。ページやコンテンツの読み込み時にユーザーの待機体験を快適にし、デザインのアクセントにも活用できます。

まとめ

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

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

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