WebサイトやLPを「良く見せたい」「ユーザーの視線を引きつけたい」
──そんな時に役立つのが CSS/JSアニメーション です。
今回は、コピペでそのまま使える 「CSS/JSアニメーション集10選」をまとめました。
デザインを邪魔せず、どのジャンルのサイトにも取り入れやすい動きを中心に掲載しているため、
ポートフォリオ・企業サイト・EC・サービス紹介ページなど、幅広い場面で活用できます。
制作にすぐ導入できる内容となっていますので、ぜひ気になるものから試してみてください。
下から上にブラーが解けながらフェード
See the Pen 下から上にブラーが解けながらフェード by et (@eito-oda) on CodePen.
このアニメーションは、テキストが下から上へ滑らかに移動しながら、ブラー（ぼかし）が解けてフェードインする演出です。スクロール位置で発動し、視線を自然に誘導できるため、ファーストビュー後の説明文やセクション導入にとても相性が良い表現です。
特徴
- 下→上へのスムーズな移動で流れのある登場を演出
- ぼかし → クリアへ変化することで洗練された印象に
- ScrollTriggerでスクロール量と連動したタイミング発火
- 軽量でシンプルなコード構成
活用シーン
- セクション見出し・導入文の段階的表示
- サービス説明・キャッチコピー・強調テキスト
- 洗練されたブランドサイト / コーポレートサイト
- ファーストビュースクロール後の重要メッセージの提示
メリット
- 文章が自然に読み始められる流れを作れる
- 画面に「動きのストーリー」が生まれ離脱を防ぎやすい
- 文字・画像・ボックスなど、幅広く応用可能
- 汎用性が高く、他のアニメーションと組み合わせやすい
下から上へブラー解除フェードは、読み始めの導線をつくるのに最適なアニメーションです。派手すぎず洗練された印象を与えながら、ユーザーの視線誘導と情報訴求に強い効果を発揮します。
回転＋バウンス
See the Pen 回転＋バウンス by et (@eito-oda) on CodePen.
要素が回転しながらスケールアップし、弾むように前面へ飛び出すアニメーションです。
静止状態から一気にポップアップする動作が視覚的なインパクトを生み、ユーザーの注意を自然に引きつけます。
スクロール連動により、読み進めたタイミングで表示されるため、サイト内の動きにリズムが生まれます。
特徴
- 360°回転と拡大のコンビネーションで印象的な登場演出
- 弾むようなバウンド感により柔らかい・楽しい印象を付与
- スクロール位置で発動するため、不要な常時アニメーションにならない
活用シーン
- 見せたい数値や実績のポップアップ
- サービス・商品紹介のアイキャッチ
- モーダル・ポップアップ導線の誘導
- キャンペーン告知やキービジュアルの注目演出
メリット
- 瞬間的に視線を集め、ユーザーの離脱を抑制できる
- 単調になりやすい縦スクロール構成にリズムを追加
- GSAPなら数行のコードで滑らかに実装でき、パフォーマンスも高い
「回転＋バウンス」は、インパクト・楽しさ・視認性の3要素を兼ね備えた登場演出です。
自然なスクロール連動でページのテンポを作りながら、強調したい重要コンテンツを確実に届けられるのが大きな魅力です。
テキストが「縦ライン」でスパッと切れて出現
See the Pen テキストが「縦ライン」でスパッと切れて出現 by et (@eito-oda) on CodePen.
テキストの一部を縦方向のラインで切り取ったように隠し、そこから下方向→上方向へ一気に押し上げるように表示させるアニメーションです。
視覚的なスピード感とキレのある演出が特徴で、テキストの存在感を一段階引き上げられます。読み進めたタイミングで出現するため、ユーザーの注目を項目ごとにしっかり集める効果があります。
特徴
- テキストが縦に切れているようなマスク効果でインパクトを演出
- 下から一気に「スパッ」と浮上するモーションで力強い表現が可能
- シンプルな構造＆ハイパフォーマンスでデザインに馴染ませやすい
活用シーン
- セクションタイトル・見出し・キャッチコピーの強調
- 実績・数値・キーワードのアクセント表示
- ブランドサイト・ランディングページの導入パート
- 「勢い」や「高級感」を求める場面での文字演出
メリット
- テキスト単体でも印象が残りやすく、内容の訴求力を高められる
- スクロール連動によりユーザー体験にリズムを付与
- 短いモーションなので可読性を損なわずにテンポ感だけ向上できる
- GSAPによって実装が軽量で滑らか、アニメ破綻も起こりにくい
縦方向のマスクと素早い浮上モーションによって、文字情報にシャープな存在感を与えるアニメーションです。見出しやキーワード強調に最適で、情報を整理しながら視線誘導を行えるため、コンテンツの没入感アップにもつながります。
セクションタイトルのアンダーライン伸長
See the Pen セクションタイトルのアンダーライン伸長 by et (@eito-oda) on CodePen.
スクロールに合わせて、セクションタイトルの下にあるアンダーラインが左から右へスッと伸びていくアニメーションです。
文字を邪魔しないシンプルな演出でありながら、セクションの始まりを視覚的に印象づけられるため、ページ全体に「流れ」や「メリハリ」を生み出せます。アニメーションがスクロール量と連動することで、ユーザーに自然な没入感を与えられる点も特徴です。
特徴
- タイトル下のラインが横方向へ伸びるシンプルで洗練された演出
- スクロール連動（scrub）によりユーザー操作と動きが同期
- 文字を強調しつつもデザインを壊さないナチュラルなアクセント
- CSSカスタムプロパティで管理しやすく、レスポンシブにも対応しやすい
活用シーン
- サービス紹介・料金プラン・実績などのセクション見出し
- ランディングページの各ステップ区切り
- コーポレートサイト、ポートフォリオ、メディアサイトなど汎用性の高い場面
- 上品・スタイリッシュ・ミニマルデザインを求めるサイト
メリット
- 「次の内容が始まる感」を自然に演出でき、視線誘導が強化される
- 動きが控えめでユーザーの集中を邪魔せず、読みやすさを維持
- 他のアニメーションと併用しても調和しやすい（フェード・ズーム等）
- 実装が軽量で表示負荷が少なく、制作コストも低い
アンダーラインを伸ばすだけの控えめな演出ですが、セクション開始を丁寧に表現することで、ページ全体の印象が大きく変わります。単調になりやすい長ページの読了体験を改善したい場合に特におすすめのアニメーションです。
ボタン呼吸エフェクト
See the Pen ボタン呼吸エフェクト by et (@eito-oda) on CodePen.
ボタンがふわっと膨らんだり戻ったりを繰り返し、まるで「呼吸している」ように見えるアニメーションです。
ユーザーの目を自然に惹きつけながらも、しつこさのない柔らかい演出が魅力。CTA（問い合わせ・購入・応募など）への導線を強調したい場合に特に効果的で、ボタンの存在感を高めつつクリックを促すことができます。
特徴
- ボタンが「ふくらむ → 元に戻る」をゆっくりループし、視覚的な鼓動効果を演出
- 優しいアニメーションで押し付け感がなく、ユーザー体験を損なわない
- GSAPで滑らかなモーションを実現し、動作も軽くカクつきにくい
- 色・サイズ・速さ・スケール値などを自由にカスタマイズできる
活用シーン
- CTAボタン（お問い合わせ / 資料請求 / 購入ボタン / 無料体験など）
- LPやキャンペーンサイトのコンバージョンポイント
- フォーム送信ボタン・バナーエリア・クーポンボタンの目立たせたい場面
- 期間限定イベント・セールなど、誘導力を高めたい導線
メリット
- ボタンに視線が集中しやすいためクリック率が向上しやすい
- 大きすぎる演出に比べて上品で、コンテンツの雰囲気を保てる
- 実装が非常にシンプルで、既存デザインに後から追加しやすい
- GSAPなら動作が滑らかで、端末差による見た目の崩れが少ない
ボタン呼吸エフェクトは、ユーザーを自然にCTAへ誘導するのに最適なUIアニメーションです。控えめで洗練された動きなので、どんなサイトでも取り入れやすく、クリック率向上にもつながりやすい「コスパの高いアニメーション」といえます。
3Dパーティクル風の散らばりエフェクト
See the Pen 3Dパーティクル風の散らばりエフェクト by et (@eito-oda) on CodePen.
中央に集まったドットが、視界に飛び散るように三次元方向へ広がっていくアニメーションです。
単なる2Dの拡散ではなく、X・Y・Z方向へランダムに散らばるため、立体感と奥行きのあるダイナミックな視覚演出が可能。セクション冒頭やタイトルまわりに配置するだけで、一気に「ハイエンドなモーショングラフィックス感」を演出できます。
特徴
- 粒子（パーティクル）が多方向にランダム分散し、立体的な動きを表現
- Z軸を使用することで奥行きのある3D表現が可能
- 滞在時間が短く、サイトの邪魔にならない軽快なモーション
- 表示内容を問わずあらゆる背景・デザインに馴染む
活用シーン
- メインビジュアルでの「視線誘導」「高級感・近未来感」の演出
- タイトル前のイントロ・シーン切り替えエフェクト
- Web制作会社・IT・ゲーム・クリエイティブ業界サイトの演出強化
- LPの商品の世界観（SF・テック系）表現
- サイトの初回ファーストビューでワンポイントの「驚き」を与えたい時
メリット
- 派手だが瞬間的に消えるため UX を損なわない
- GSAP を活用することで処理が軽く、50粒以上でも滑らか
- 粒の数・色・サイズ・拡散方向・速度を自由に変更でき、応用性が高い
- 他のテキスト・画像アニメーションと組み合わせやすい
3Dパーティクル風の散らばりエフェクトは、ページの「導入インパクト」を一瞬で高められる強力な演出です。サイトの世界観を簡単にリッチに見せられ、没入感・高級感・未来感を演出したい場合に最適。難しそうに見えてコードはシンプルなので、魅せ場を作りたい際にぜひ押さえておきたい表現です。
hoverで色スライダー斜め
See the Pen hoverで色スライダー斜め by et (@eito-oda) on CodePen.
ボタンにカーソルをのせた瞬間、斜め方向に色が走り抜けるように切り替わるホバーアニメーションです。水平のスライドとは違い、斜めのモーションが付くことでよりダイナミックでスタイリッシュな印象を与えられます。カチッとした UI に「動きのデザイン性」を取り入れたい時に効果抜群です。
特徴
- 擬似要素の背景が斜めにスケールしながら滑り込む演出
- ホバー後は自然に文字色が反転し、視認性とアクティブ感を両立
- スピーディでキレのあるモーションで洗練された印象
- イベント感・インタラクション感が強く、クリック誘導に向く
活用シーン
- CTAボタン・申し込みボタン・お問い合わせボタン
- サービス一覧や詳細ページリンクなどのナビ UI
- Web制作・IT・モダンなコーポレートサイトの装飾
- ボタンの存在感を高めてユーザーの視線を自然に誘導したい時
- シンプルなデザインに「動きで差別化」したい時
メリット
- CSSのみで実装でき、サイト全体の負荷が軽い
- ボタンサイズ・色・角度などカスタマイズ性が高く応用しやすい
- デザインの世界観に合わせて数値調整するだけで印象を最適化可能
- 静止状態では落ち着いていて、hover時のみ印象を強められるので UX を損なわない
「hoverで色スライダー斜め」は、ボタンを派手に見せすぎずに品のある躍動感を演出できる UI アニメーションです。リンクボタンのクリック率アップや、ページのアクセント作りに最適。単純な色変化よりワンランク上の「インタラクティブ感」を取り入れたい場合におすすめです。
hoverでテキストカラーが左から変化するアニメーション
See the Pen hoverでテキストカラーが左から変化するアニメーション by et (@eito-oda) on CodePen.
カーソルを乗せた瞬間、文字色が左から右へスーッと切り替わるアニメーションです。単純な色変更ではなく、テキストの中を色が流れ込むように見えるため、さりげなくも印象的なホバー効果が演出できます。ブランドカラーやアクセントカラーを取り入れるだけで、洗練された Web 表現に変わります。
特徴
- 文字内部のグラデーション背景をアニメーションさせて発色させる演出
- 文字の輪郭はそのまま保持されるため視認性が高い
- 落ち着いた雰囲気と動きの存在感を両立
- CSSのみで実現でき、パフォーマンスが良い
活用シーン
- ニュース一覧、メニュー、テキストリンクへのホバー演出
- CTAボタンテキストのワンポイント強調
- サービス一覧やブログ記事カードなどの見出し
- シンプルなタイポグラフィサイトのアクセント
- 高級感やミニマルデザインのトーンにマッチ
メリット
- ユーザーの視線を自然に誘導でき、リンクの気付きやすさが向上
- カラー・速度・方向を変えるだけで多様な表現に応用可能
- フォントや余白を邪魔せず、デザインの世界観を崩さない
- ボタンほど強調しすぎず、落ち着いた UI 演出として最適
「hoverでテキストカラーが左から変化するアニメーション」は、控えめで品のあるホバー演出を求める場面にベスト。リンクテキストの視認性を高めながら、サイト全体にスタイリッシュな雰囲気をプラスできます。クリック率改善にもつながる、実用性の高いタイポグラフィアニメーションです。
hoverでモノクロから元の色に
See the Pen hoverでモノクロから元の色に by et (@eito-oda) on CodePen.
画像にカーソルを重ねた瞬間、モノクロから徐々にフルカラーへ戻るアニメーションです。静止時は落ち着いた印象を与えつつ、ホバー時に色味が復活することで視覚的なインパクトと情報の強調を同時に実現できます。クリック誘導を促すうえで定番かつ効果の高い表現です。
特徴
filter: grayscale()を利用したシンプルで軽量なアニメーション- 色がゆっくり戻る視覚効果により、自然な存在感を演出
- 画像そのものの魅力を損なわず、余計な装飾なくアテンションを高められる
- CSSのみで実装でき、全ブラウザで高い対応性
活用シーン
- 作品ギャラリー・ポートフォリオ・制作実績のサムネイル
- 商品一覧・サービス一覧・ブログカードの視認性強化
- メンバー/スタッフ紹介ページの顔写真強調
- マウスオーバーの変化でクリック誘導したいコンテンツ全般
メリット
- 訴求力を上げながらもデザインを邪魔しない
- モノクロ × カラーの対比により、洗練されたプロフェッショナルな印象を与える
- ホバー状態の有無が直感的に伝わり、ユーザー操作が分かりやすくなる
- ページ全体に統一感を持たせつつ、インタラクション体験を向上できる
「hoverでモノクロから元の色に」は、デザインを大きく変えずにユーザーの注目度・操作感を高めたい時に最適なアニメーション。画像を魅力的に見せつつ自然な誘導ができ、ギャラリーや商品ページなどあらゆる用途で役立つ万能ホバーエフェクトです。
ドットがスライドする波ローディング
See the Pen ドットがスライドする波 by et (@eito-oda) on CodePen.
複数の丸いドットが時間差で上下にスライドし、波のような動きを生み出すローディングアニメーションです。視覚的にリズム感があり、読み込み中のストレスを軽減する効果が期待できます。CSSのみで実装でき、軽量かつ高パフォーマンスな点も魅力です。
特徴
- 複数のドットが時間差で上下に動き、連続した波のようなアニメーションを表現
- JavaScript不要で、CSSだけで動作する軽量ローディング
- シンプルながら視認性が高く、あらゆるデザインに馴染む
活用シーン
- ページ読み込み中のローディング表示
- API通信やフォーム送信後の待機表示
- 画像や動画のプリロード時のインジケーター
- ミニマルデザインのサービス・アプリ・LP
メリット
- CSSのみで実装できるため表示が高速で負荷が少ない
- 5つのドットを使った時間差アニメーションで動きに奥行きが出る
- デザイン・ブランドカラーに合わせて色やサイズの変更が容易
- 長時間の待機でもユーザーのストレスを軽減
波状に動くドットのローディングアニメーションは、シンプルながら視覚的な楽しさがあり、ページや処理の待ち時間を自然に演出できます。実装も容易で、UIを洗練させたい場面にぴったりの表現です。
まとめ
アニメーションは、派手さよりも 「適切な場面で、適切な動きを使うこと」が大切です。
ほんの少し動きを加えるだけでも、サイトの印象・読みやすさ・使いやすさは大きく変わります。
今回紹介したアニメーションはどれも 軽量・シンプル・汎用性が高い ものばかりです。
動きのあるレイアウトを少し加えるだけでも、サイト全体の雰囲気がぐっと明るくなることがあります。
ぜひ、制作されているプロジェクトの中で、合いそうな場面があれば取り入れてみてください。
