WebサイトやLPを「良く見せたい」「ユーザーの視線を引きつけたい」
──そんな時に役立つのが CSS/JSアニメーション です。
今回は、コピペでそのまま使える 「CSS/JSアニメーション集10選」をまとめました。
デザインを邪魔せず、どのジャンルのサイトにも取り入れやすい動きを中心に掲載しているため、
ポートフォリオ・企業サイト・EC・サービス紹介ページなど、幅広い場面で活用できます。
制作にすぐ導入できる内容となっていますので、ぜひ気になるものから試してみてください。
ぼかし → クリアにフェードイン
See the Pen ぼかし → クリアにフェードイン by et (@eito-oda) on CodePen.
ぼかしが徐々にクリアになりながらフェードインするアニメーションは、視覚的に柔らかく自然な登場感を演出できるテキスト表現です。ユーザーの目を引きつつ、コンテンツの出現を滑らかに見せることができます。
特徴
- 初期状態でテキストがぼかされ、透明度も低い
- 徐々にクリアになりながらフェードインする滑らかなアニメーション
- GSAP × ScrollTriggerでスクロール位置に応じて発動
活用シーン
- LPやコンセプトサイトでのキャッチコピー演出
- 見出しやセクションタイトルの登場時アニメーション
- スクロールに合わせた動的コンテンツの出現演出
メリット
- 滑らかで上品なテキスト出現を表現できる
- ユーザーの目を自然に誘導できる
- CSSのみでは難しい複雑なスクロール連動アニメーションを簡単に実装可能
ぼかしからクリアに変化するフェードインは、スクロールに応じて自然にテキストを出現させる演出で、ユーザー体験を向上させつつ、デザインに高級感や動きをプラスできます。
X軸回転ポップアップ
See the Pen X軸回転ポップアップ by et (@eito-oda) on CodePen.
X軸回転ポップアップは、要素が縦軸（横方向）に回転しながら出現するアニメーションです。
スクロールに合わせて立体的な回転を加えることで、ユーザーの目を引きつけつつ、ダイナミックな登場感を演出できます。
特徴
- 要素がX軸を中心に360°回転してから元の位置に戻る
- 自然な透明度変化（フェードイン）と組み合わせることで滑らかに登場
- GSAP × ScrollTriggerによりスクロール位置で精密に発動
活用シーン
- 見出しや重要なテキストの強調演出
- LP・コンセプトサイトでの視覚的インパクト付与
- 商品紹介や機能紹介セクションの注目度アップ
メリット
- 立体的で動きのある演出が簡単に作れる
- ユーザーの視線を誘導でき、スクロール体験を楽しく演出
- 回転とフェードを組み合わせることで、存在感のある出現を実現
X軸回転ポップアップは、縦方向に回転しながらフェードインする立体的な登場演出で、視覚的インパクトと滑らかなスクロール体験を両立させることができます。
四角形が「回転しながら」開くマスク
See the Pen 四角形が“回転しながら”開くマスク by et (@eito-oda) on CodePen.
四角形が「回転しながら」開くマスクは、要素が中央から回転しつつ展開して見えるマスクアニメーションです。スクロールに合わせてマスクと回転を組み合わせることで、ダイナミックで立体感のある出現演出を実現できます。
特徴
- 中央から広がるマスクでコンテンツが徐々に現れる
- 要素が回転しながら表示されることで立体的な演出が可能
- GSAP × ScrollTriggerによりスクロール位置で正確に発動
活用シーン
- LPやポートフォリオでの重要なビジュアル強調
- 商品やサービス紹介の注目ポイント演出
- 見出しやキャッチコピーのインパクト付与
メリット
- 視覚的にインパクトのある表示が簡単に実装可能
- 回転とマスクの組み合わせで独自性の高い演出が作れる
- スクロールに連動することで自然なユーザー体験を提供
この四角形マスクの回転アニメーションは、回転しながら中央から展開する立体的な出現演出で、ユーザーの視線を自然に誘導しつつ、ページに高い視覚的インパクトを与えられる手法です。
スクロールで段落の『強調キーワード』だけ色が変化する
See the Pen スクロールで段落の『強調キーワード』だけ色が変化する by et (@eito-oda) on CodePen.
スクロールで段落内の『強調キーワード』だけ色が変化する演出は、文章の中で重要な部分だけを視覚的に強調する手法です。ユーザーがスクロールするタイミングで色が変化するため、自然に注目を集めながら読み進めることができます。
特徴
- 段落の一部の文字だけ色が変化するため、重要語を直感的に強調可能
- スクロール位置に応じてアニメーションが発動
- GSAP × ScrollTriggerによりスムーズかつ正確に制御可能
活用シーン
- 企業紹介やサービス紹介の文章中でキーワード強調
- LPやブログ記事でユーザーの視線誘導
- プレゼン資料風のWeb演出でのインパクト強化
メリット
- 文章の読みやすさを損なわず、重要箇所を強調
- スクロール連動で動きが自然で視覚的に楽しい
- コード量が少なく実装が簡単
このスクロール連動のキーワード色変化は、文章内の重要語をユーザーの注目ポイントとして効果的に見せる演出で、自然なスクロール体験と合わせて視覚的インパクトを高めることができます。
ボタンシャドウフェード
See the Pen ボタンシャドウフェード by et (@eito-oda) on CodePen.
ボタンにシャドウがゆらゆらフェードイン・アウトする演出は、ユーザーの注目を自然に集めるインタラクティブ効果です。単純なボタンでも動きが加わることで、クリック誘導や操作性を高めることができます。
特徴
- ボタンのシャドウがゆっくりフェードイン・アウトするアニメーション
- GSAPの
yoyoとrepeatで無限ループが可能 - 繊細で自然な光の演出を再現
活用シーン
- LPやキャンペーンページのCTAボタン強調
- サイト全体の操作誘導ボタン
- UIデザインで動的な視覚効果を演出
メリット
- ボタンの存在感を高め、クリック率向上に寄与
- 実装がシンプルで軽量
- 過剰でなく自然な動きでユーザーに負担をかけない
ボタンシャドウフェードは、動きでユーザーの視線を誘導しつつ、UIの操作性とデザイン性を向上させる効果的な演出です。
3Dカードが空中で回転しながら迫ってくる
See the Pen 3Dカードが空中で回転しながら迫ってくる by et (@eito-oda) on CodePen.
この3Dカードアニメーションは、カードが空中で回転しながら手前に迫ってくる演出です。スクロールに応じて立体的に浮かび上がる動きにより、ユーザーに強い視覚的インパクトを与え、印象的なコンテンツ表現が可能です。
特徴
- 3D空間でカードが回転しながら手前に迫るアニメーション
perspectiveとtransform-style: preserve-3dを利用して奥行きを表現- スクロールトリガーで発動し、自然なタイミングで演出
活用シーン
- サービスや商品の注目ポイント紹介
- LPやポートフォリオのビジュアル演出
- 重要なコンテンツの視覚的強調
メリット
- 奥行きのある動きでコンテンツに立体感を付与
- ユーザーのスクロールに合わせて自然にアニメーション発動
- シンプルなCSSとGSAPだけで高級感のある3D演出を実現
スクロールに連動して回転しながら迫ってくる3Dカードは、動きで注目を集め、サイト全体の印象を格上げする効果的な演出です。
hoverで色スライダー
See the Pen hoverで色スライダー by et (@eito-oda) on CodePen.
この見出しアニメーションは、hover時に背景色が横方向にスライドして変化するエフェクトです。ユーザーがマウスを合わせた瞬間に滑らかに色が広がることで、ボタンやリンクのインタラクションを視覚的に強調できます。
特徴
- マウスホバーで背景色が左から右へスライドして変化
- CSSの
transform: scaleXを使ったスムーズなアニメーション - 文字色も連動して変化し、読みやすさを確保
活用シーン
- ナビゲーションリンクやボタンのインタラクション演出
- サイト内の注目コンテンツやCTAの強調
- LPやポートフォリオでの視覚的アクセント
メリット
- ユーザーの視線を自然に誘導できる
- シンプルなCSSだけで実装可能で軽量
- 色変化とアニメーションでクリック意欲を高められる
hoverで色がスライドするエフェクトは、操作感と視覚的インパクトを両立させたシンプルながら効果的な演出で、リンクやボタンの注目度をアップさせます。
テキストが上下に回転するアニメーション
See the Pen テキストが上下に回転するアニメーション by et (@eito-oda) on CodePen.
この見出しアニメーションは、テキストが上下に回転するように見えるエフェクトです。
マウスをホバーすると文字が上下に切り替わる動きが発生し、視覚的な遊び心と動きのあるデザインを演出できます。
特徴
- マウスホバーで文字が上下にスライドして入れ替わる
text-shadowと透明色を組み合わせた独自のアニメーション- CSSのみで軽量に実装可能
活用シーン
- サイトの見出しや強調テキストに動きを付けたいとき
- LPやサービス紹介で注目させたい箇所
- ボタンやリンクのホバー演出のアクセント
メリット
- CSSだけで実装できるため読み込みが軽い
- シンプルながら目を引く動きを演出可能
- ユーザーにインタラクティブな体験を提供できる
テキストの上下回転アニメーションは、ホバー時に文字がスライドして入れ替わる動きで、視覚的なアクセントを加えつつ、軽量で簡単に実装できる演出方法です。
hoverでモノクロに
See the Pen hoverでモノクロに by et (@eito-oda) on CodePen.
この見出しアニメーションは、マウスホバー時に画像をモノクロ（グレースケール）化するエフェクトです。ユーザーがカーソルを合わせると色が抜け、印象的な切り替え効果を演出できます。
特徴
- ホバー時に画像がグレースケール化され、色彩が抜ける
- CSSの
filter: grayscale()を使用した軽量アニメーション - スムーズなトランジションで自然な見た目
活用シーン
- サイトのギャラリーやポートフォリオでの画像強調
- LPや商品紹介でホバー時に注目させたい場合
- メニューやリンクに視覚的アクセントを加えたい時
メリット
- CSSのみで簡単に実装可能
- ページ表示に負荷をかけずに動きを追加できる
- ユーザーにインタラクティブな体験を提供できる
hoverでモノクロ化するアニメーションは、画像を目立たせつつ自然に注目を集める演出で、簡単に取り入れられる軽量なインタラクティブ効果です。
ランダム色ドットが順番に跳ね拡大するローディング
See the Pen ランダム色ドットが順番に跳ね拡大 by et (@eito-oda) on CodePen.
この見出しアニメーションは、複数のカラフルなドットが順番に跳ねながら拡大するローディング演出です。ランダムに設定された色のドットがリズミカルに動くことで、待機中のページでもユーザーに視覚的な楽しさを提供します。
特徴
- ドットが順番に跳ね上がり、拡大する動き
- ドットごとに色を変えてランダム感を演出
- CSSアニメーションのみで軽量かつスムーズ
活用シーン
- ページやコンテンツの読み込み中のローディング表示
- アプリやサービスのインタラクティブな待機画面
- デモサイトやポートフォリオで視覚的なアクセントとして
メリット
- 実装がシンプルでCSSのみで完結
- ユーザーに待機中も楽しさを提供できる
- カラフルなデザインで視認性が高く印象に残りやすい
ランダム色ドットの跳ね拡大アニメーションは、待機時間を退屈させずに楽しい体験を提供できる軽量ローディング演出です。
まとめ
アニメーションは、派手さよりも 「適切な場面で、適切な動きを使うこと」が大切です。
ほんの少し動きを加えるだけでも、サイトの印象・読みやすさ・使いやすさは大きく変わります。
今回紹介したアニメーションはどれも 軽量・シンプル・汎用性が高い ものばかりです。
動きのあるレイアウトを少し加えるだけでも、サイト全体の雰囲気がぐっと明るくなることがあります。
ぜひ、制作されているプロジェクトの中で、合いそうな場面があれば取り入れてみてください。
