WebサイトやLPを「良く見せたい」「ユーザーの視線を引きつけたい」
──そんな時に役立つのが CSS/JSアニメーション です。
今回は、コピペでそのまま使える 「CSS/JSアニメーション集10選」をまとめました。
デザインを邪魔せず、どのジャンルのサイトにも取り入れやすい動きを中心に掲載しているため、
ポートフォリオ・企業サイト・EC・サービス紹介ページなど、幅広い場面で活用できます。
制作にすぐ導入できる内容となっていますので、ぜひ気になるものから試してみてください。
下から上にフェードイン
See the Pen 下から上にフェードイン by et (@eito-oda) on CodePen.
ページをスクロールして該当箇所が画面内に入った瞬間、見出しが下から上へ持ち上がるように表示されるアニメーションです。
透明な状態から徐々に存在感を増しながら表示されるため、次のコンテンツへのつながりが自然になり、読み手の視線誘導にも効果的です。
動きはシンプルですが、見出しの切り替わりにメリハリが生まれるため、
テキストの区切りやセクション構成を分かりやすく見せたい場面に向いています。
違和感なくサイトデザインに馴染む演出のため、企業サイト・ポートフォリオ・ブログなど幅広いジャンルで使いやすいのが特徴です。
ポップアップアニメーション
See the Pen ポップアップアニメーション by et (@eito-oda) on CodePen.
見出しが画面に入ったタイミングで、小さく縮んだ状態からふわっと大きさを戻しながら登場するアニメーションです。
一瞬の「ポップ感」のある動きが加わることで、見出しへの注目度が高まり、コンテンツの切り替わりをしっかり印象づけることができます。
単調になりやすいページ構成でも、このアニメーションを挟むことで、「次の情報に進む瞬間」を強調し、ページ全体にリズムと立体感を生み出せるのが魅力です。
柔らかい動きのため、デザインの邪魔にならず、企業サイト・採用ページ・サービス説明・ブログ記事など幅広い場面で使いやすいのもポイント。
特に、見出しや強調ブロックを目立たせたい場面で効果を発揮します。
文字が横からマスクスライド
See the Pen 文字が横からマスクスライド by et (@eito-oda) on CodePen.
文字が横方向からスッと流れ込むように現れる、洗練された印象のアニメーションです。
テキスト全体をラップした要素にマスクをかけ、その内側をスライドさせて登場させることで、見せ方にグラフィック演出的な奥行きを与えられます。
ふわっと表示される演出とは違い、「ライン・スピード感・スマートさ」 を感じさせる動きが特徴。
特に、スタイリッシュなサイトや、モダンなブランド・サービスの表現と相性が良く、画面遷移なしでセクションの切り替わりを印象づけたい時に効果的です。
視線を自然とテキスト方向へ誘導できるため、キャッチコピー・セクションタイトル・ブランドメッセージ など、伝えたい意味をしっかり届けたい場面に最適です。
ピン留め（スクロール固定 ）
See the Pen ピン留め（スクロール固定 ） by et (@eito-oda) on CodePen.
スクロール中に特定の見出しやブロックを画面に固定（ピン留め）するアニメーションです。
ユーザーがページを下へ進んでも要素がその場にとどまり、一定のスクロール量が過ぎたタイミングで解除される動きになっています。
コンテンツが流れていく中で見出しが固定されることで、「今はこのセクションを読んでいる」 という認識が明確になり、内容を印象づけやすくなるのが大きなメリットです。
また、複数の要素を連続して切り替えたり、固定中にアニメーションを組み合わせたりすることで、
ストーリー性のある読み進行を演出でき、記憶に残りやすい表現へつながります。
情報量が多いページや、特に強調したい内容を扱うセクションなど、
深く読んでほしい場面で効果を発揮するアニメーションです。
自動回転（画像）
See the Pen 自動回転（画像） by et (@eito-oda) on CodePen.
画像がゆっくりと回転し続ける、視覚的なアクセントをつくるアニメーションです。
回転速度は一定のため派手になりすぎず、背景演出のような感覚でデザインに自然となじみます。
単なる静止画像とは違い、わずかな動きがあることで装飾としての存在感が高まり、ページ全体の世界観づくりに貢献できるのがポイント。
ロゴ・テキストアート・丸型のグラフィックとの相性が特に良く、止まらない動きによって「視線の引き寄せ」と「場の雰囲気づくり」を同時に実現できます。
見出しの周辺に重ねたり、セクションタイトルの横に配置したりすることで、デザインに深みを出したい時や、ブランド感・個性を演出したい場面でとても効果的なアニメーションです。
カウントアップ
See the Pen カウントアップ by et (@eito-oda) on CodePen.
数字がスクロールに合わせて0から目的の値まで増加していく、注目度の高いアニメーションです。
動きが加わることで、統計情報や実績、数字で表現するデータを視覚的に強調でき、ページの説得力を高めます。
ただ表示するだけの数字よりも、数値が変化していく様子を見せることで、ユーザーの視線を自然に誘導できるのが大きな特徴です。
特に、売上・会員数・制作実績・割合・進捗など、数字で成果や規模を示したい場面で効果的に使えます。
シンプルで見やすく、デザインを邪魔しないため、企業サイト・サービス紹介・ポートフォリオ・ブログ記事など幅広いジャンルで活用しやすいアニメーションです。
3Dカードが右上斜めから全面に向かって移動
See the Pen 3Dパネルが右上奥から全面に向かってスライドイン by et (@eito-oda) on CodePen.
右上から斜め方向に3D感のあるカードがゆっくりと画面手前に移動してくる、立体的で印象的なアニメーションです。
カードが奥行きのある動きで登場することで、ページにリズム感と立体感が生まれ、単調になりがちな見出しやセクションに視覚的な強弱を加えられます。
この演出は、特に 商品紹介・サービス特徴・ポートフォリオのハイライト など、注目させたいコンテンツを目立たせたい場面で効果的です。
3Dの奥行き表現を取り入れることで、ユーザーに「情報が手前に迫ってくる」ような感覚を与え、印象に残りやすい見せ方が可能です。
派手すぎず、かつ存在感のある動きのため、ブランドサイトやクリエイティブ系のブログでも使いやすく、サイト全体のデザインに高級感や立体感をプラスする演出としておすすめです。
hoverで押し込み
See the Pen hoverで凹む by et (@eito-oda) on CodePen.
マウスオーバー（hover）時に、見出しやボタンが軽く押し込まれるように動くアニメーションです。
立体感のある影（ボックスシャドウ）と一緒に動くことで、押せる感覚や操作性を直感的に伝えられます。
この演出は、ユーザーに『「クリックできる」ことを視覚的に示す』効果があり、ナビゲーションやCTAボタン、リンク付き見出しなどに最適です。
シンプルでさりげない動きなので、派手になりすぎず、サイト全体のデザインを損なわずにアクセントを加えられます。
さらに、押し込みの動きは操作感を高め、ユーザー体験（UX）の向上にもつながるため、ボタンやリンク周りの小さな演出として非常に使いやすいアニメーションです。
hoverで左から右へ下線が移動
See the Pen 左から右へ下線が移動 by et (@eito-oda) on CodePen.
マウスオーバー（hover）時に、見出しの下に左から右へスッと下線が伸びるアニメーションです。
シンプルながらも動きがあることで、テキストに注目を集めやすく、視覚的に「操作できる要素」や「強調したいポイント」を自然に伝えられます。
この演出は、ナビゲーションリンク・記事内見出し・ボタンテキストなど、ユーザーの視線誘導や強調表示に最適です。
派手になりすぎず、デザインを損なわないため、シンプルなサイトからモダンなブランドサイトまで幅広く使いやすいのも特徴です。
また、下線が動くことでテキストにリズム感が生まれ、ページ全体の印象も洗練されます。
読み手に自然なアクセントをつけたい場面で効果的なアニメーションです。
hoverでズーム
See the Pen hoverでズーム by et (@eito-oda) on CodePen.
マウスオーバー（hover）時に、見出しや画像が拡大してズームするアニメーションです。
軽やかな拡大効果により、テキストや画像に自然な存在感を与え、ユーザーの視線を集めやすくなります。
この演出は、画像付き見出しやサムネイル、商品紹介、ポートフォリオのビジュアル強調に特に適しています。
派手すぎず、ページ全体のデザインを損なわないため、シンプルなサイトからモダンなブランドサイトまで幅広く活用可能です。
また、ズーム効果は「動きがあることで注目される」という心理的効果もあるため、ユーザー体験（UX）の向上にもつながります。
クリックや詳細確認につなげたい要素に自然なアクセントを加えたい場面で非常に使いやすいアニメーションです。
まとめ
アニメーションは、派手さよりも 「適切な場面で、適切な動きを使うこと」が大切です。
ほんの少し動きを加えるだけでも、サイトの印象・読みやすさ・使いやすさは大きく変わります。
今回紹介したアニメーションはどれも 軽量・シンプル・汎用性が高い ものばかりです。
動きのあるレイアウトを少し加えるだけでも、サイト全体の雰囲気がぐっと明るくなることがあります。
ぜひ、制作されているプロジェクトの中で、合いそうな場面があれば取り入れてみてください。
