WebサイトやLPを「良く見せたい」「ユーザーの視線を引きつけたい」
──そんな時に役立つのが CSS/JSアニメーション です。
今回は、コピペでそのまま使える 「CSS/JSアニメーション集10選」をまとめました。
デザインを邪魔せず、どのジャンルのサイトにも取り入れやすい動きを中心に掲載しているため、
ポートフォリオ・企業サイト・EC・サービス紹介ページなど、幅広い場面で活用できます。
制作にすぐ導入できる内容となっていますので、ぜひ気になるものから試してみてください。
下から上へ複数フェードイン
See the Pen 下から上へ複数フェードイン by et (@eito-oda) on CodePen.
ページをスクロールして対象エリアが画面に入ったタイミングで、複数のボックスやテキストが 下から上へ順番にふわっと立ち上がるように表示されるアニメーション です。
1つずつ時間差（ステップ）で表示されていくため、同じデザインの要素が続く場面でも単調にならず、コンテンツにリズムと動きを与えることができます。
一覧・カード・サービス内容・ギャラリーなど、複数の要素を並べたブロックで特に効果的で、
「次のパーツに目線が移動しやすい」「見せたい順番で視線誘導できる」 というメリットがあります。
控えめながらも自然なアクセントが生まれるため、企業サイト・ポートフォリオ・サービス紹介・ブログ記事まで幅広く使いやすい演出です。
サイト全体の統一感を崩さず、プロのような「心地よいテンポ」を加えたい時に最適です。
連続ポップアップ
See the Pen 連続ポップアップアニメーション by et (@eito-oda) on CodePen.
複数の要素が、画面内に入ったタイミングで 小さく縮んだ状態からふわっと大きさを戻すように、一つずつ連続して登場するアニメーション です。
単体のポップアップよりもリズム感があり、複数の要素が並ぶレイアウトに「注目ポイントが連続して現れる楽しさ」や「視線の誘導」を自然に生み出すことができます。
時間差（stagger）で順番に表示されるため、
・カード一覧
・サービス説明
・製品ラインナップ
・ブログの一覧サムネイル
など、「複数並びのブロック」と特に相性抜群。
動きは柔らかくインパクトがありつつ、デザインの邪魔にならないため、コーポレートサイト・ブランドサイト・EC・ポートフォリオなど幅広いジャンルで利用できます。
「シンプルだけど印象に残る仕掛けを入れたい」「視線をスムーズに移動させたい」そんな時に最適の演出です。
縦に開くマスク（上下からオープン）
See the Pen 縦に開くマスク（上下からオープン） by et (@eito-oda) on CodePen.
要素が画面に入ったタイミングで、中央から上下に向かって広がるように表示されるマスクアニメーションです。
最初は上下から挟み込まれて完全に隠れている状態から、縦方向にカーテンを開くようにスッと開放され、コンテンツ全体が一気に現れます。
視覚的に「登場の演出」が強く感じられるため、ただフェードインするよりも存在感があり、コンテンツ登場のタイミングを印象づけたい場面に最適です。
滑らかでスタイリッシュな開閉効果のため、
・セクションタイトル
・メインビジュアル
・画像やキャッチコピー
などの「見せ場となる部分の演出」として特に効果的。
大げさすぎず品のある動きのため、企業サイト・ブランドサイト・サービス紹介・ポートフォリオなど幅広いジャンルに馴染みます。
「シンプルなのに存在感を出したい」「見せたい内容の印象を高めたい」時に活躍するアニメーションです。
パララックス
See the Pen パララックス by et (@eito-oda) on CodePen.
スクロール量に合わせて画像がゆっくりと上下へ移動する、奥行きと立体感を演出できるアニメーションです。
背景が残像のように動くことで視差効果（パララックス）が生まれ、静止した画像でも「動きのあるビジュアル」として印象づけることができます。
通常のフェードイン演出とは異なり、スクロール中ずっと動きが続くため、
画面を進めるほどに「景色が変化していく感覚」を感じられるのが特徴です。
自然・建築・製品ビジュアルなど、ビジュアル訴求が強いコンテンツと相性が良く、
・ファーストビューの世界観演出
・セクション切り替えの表現
・ストーリー性のあるLP／ブランドサイト
などで特に効果を発揮します。
洗練された動きで 「リッチな印象」 を作りながらも、過剰になりすぎないため、企業サイト・ポートフォリオ・採用サイト・サービスサイトなど幅広く活用できるアニメーションです。
スクロールバー
See the Pen スクロールバー by et (@eito-oda) on CodePen.
見出し（スクロールバー）とは、ページの上部や中央に配置されたバーが、上下へ伸縮する動きを繰り返すことでスクロールを促すインタラクション演出です。
ユーザーがページを開いた瞬間に「下方向へスクロールできる」ことを視覚的に伝える役割があり、特にファーストビュー（ヒーローエリア）で多く利用されています。
シンプルな縦ラインとテキストで構成されているため、デザインの邪魔をせず操作性を自然に誘導できる点が大きな特徴です。
アニメーションは CSS の scale と transform-origin を組み合わせて行われ、線が一方向に伸びたあと反対方向へ縮む往復モーションを繰り返すことで、視線を自然に下に向けさせます。
Webサイトのユーザビリティ向上や離脱防止に効果的で、ポートフォリオ、コーポレートサイト、ランディングページなど幅広いサイトで使われています。
テキストマーカー(改行対応)
See the Pen テキストマーカー(改行対応) by et (@eito-oda) on CodePen.
見出し（テキストマーカー・改行対応）とは、スクロールで対象のテキストが画面内に入ったタイミングで、蛍光ペンでなぞったように背景色が左から右へ伸びていく演出を加えるアニメーションです。
文章の一部を強調しながら自然に視線を誘導できるため、強調したいキーワード・サービス名・コンセプトワードなどに最適です。
従来のマーカー演出は改行が発生すると途切れてしまう問題がありましたが、今回のアニメーションでは background-image と background-size を利用することで、複数行になってもラインが途切れず綺麗に表示されるのが大きな特徴です。
さらに ScrollTrigger を併用することで、スクロール位置に応じてマーカーがスッと伸びるため、自然かつ印象的なアクセントとしてページの世界観を高めます。
シンプルなコードで実装でき、デザイン性と可読性を両立できるため、コーポレートサイト、採用サイト、ポートフォリオ、ブログ記事など、幅広いジャンルで活用されている人気のアニメーションです。
3Dパネルが「奥から手前に傾きながら並ぶ」
See the Pen 3Dパネルが「奥から手前に傾きながら並ぶ」 by et (@eito-oda) on CodePen.
スクロールに連動して複数のパネルが奥の空間から手前へ滑らかに飛び出して並ぶように見える立体アニメーションです。
3D空間を表現する perspective と transform を活用し、最初は遠くの奥行きへ傾いた状態から始まり、画面内に入ったタイミングで角度を戻しながら近づいてくることで、まるで立体オブジェクトがビシッと整列していくような演出を生み出しています。
また、GSAPとScrollTriggerを組み合わせることで、各パネルが時間差で並ぶディレイ演出を実現。パネルが1枚ずつリズミカルに現れるため、洗練されたテンポと視覚的インパクトが生まれ、セクションの冒頭でユーザーの注意を強く惹きつけます。
デザイン表現としてのインパクトが大きい一方で、コードはシンプルで扱いやすく、LP・ポートフォリオ・製品紹介・3Dテイストのブランドサイト等との相性が非常に高い人気演出です。立体的な奥行き演出を取り入れたいときにおすすめのアニメーションです。
押し込み（四角形：左上→右下）
See the Pen 押し込み（四角形：左上→右下） by et (@eito-oda) on CodePen.
ホバーした瞬間に四角形の要素が左上から右下へ押し込まれるように沈むアニメーションです。
平面的なリンクボタンに『立体的な奥行き＝「押し込まれた感」』を与えることで、ボタンをクリックしたような触覚的フィードバックを演出するのが特徴です。
ボタンの背面に落ちる影（box-shadow）を利用し、通常時は影の分だけ浮いている印象を持たせ、ホバー時には影を消して本体が右下方向へ少し移動することで、クリック感のある「押し込み効果」が視覚的に再現されています。
アニメーション動作は CSS のみで完結しており、JavaScript不要で軽量・高速なのも大きな魅力です。
ユーザーインタラクションによるクリック感 / フィードバック感の演出は、CTAボタン・お問い合わせ・サービス遷移など重要リンクのクリック率向上にも貢献しやすく、LPや企業サイト、ポートフォリオからECサイトまで幅広く利用可能。
「シンプルだけど没入感のあるボタン」や「ミニマルデザインにアクセントを追加したい」場面にフィットする人気アニメーションです。
hoverで下線が中央から外側に広がる
See the Pen hoverで下線が中央から外側に広がる by et (@eito-oda) on CodePen.
マウスホバー時にテキストの下に引かれたラインが中央から左右に向かってスッと広がる演出です。
通常状態ではラインは非表示で、ホバーするとテキストの中央を起点に左右へ伸びていくため、自然でスマートなアクセントを加えることができます。
疑似要素 (::after) と CSS の transform: scaleX を使用することで、軽量かつスムーズなアニメーションを実現。
中央起点で広がる動きは視線をテキストに集中させやすく、文章や見出しの強調にも最適です。
シンプルで汎用性の高い演出のため、企業サイト・ポートフォリオ・ブログ・LPなど、幅広いウェブコンテンツに馴染みます。
文字の区切りやリンクの強調など、ユーザーの視線誘導や操作性向上にも役立つデザインアクセントです。
hoverでzoomアウト
See the Pen hoverでzoomアウト by et (@eito-oda) on CodePen.
画像や要素にマウスホバーした際に、最初は少し拡大された状態から元のサイズへスッと戻るアニメーションです。
通常より大きく表示されている状態からホバーで縮む動きにより、ユーザーの視線を自然に引きつけつつ、奥行き感や立体感のある表現を加えることができます。
この演出は CSS の transform: scale と transition を利用しており、軽量かつ滑らかな動きを実現。
ホバー前の拡大状態によって、コンテンツが画面に存在感を持ちながら表示され、ホバー時に元のサイズへ戻ることで視覚的なインタラクションが発生します。
視覚的にわかりやすく、操作感を強調できるため、画像ギャラリー・ポートフォリオ・製品紹介・リンク付きカードなど、ユーザーの注目を集めたい要素に最適です。
シンプルで洗練された動きなので、企業サイトやブログ、ランディングページなど幅広いジャンルで活用できます。
まとめ
アニメーションは、派手さよりも 「適切な場面で、適切な動きを使うこと」が大切です。
ほんの少し動きを加えるだけでも、サイトの印象・読みやすさ・使いやすさは大きく変わります。
今回紹介したアニメーションはどれも 軽量・シンプル・汎用性が高い ものばかりです。
動きのあるレイアウトを少し加えるだけでも、サイト全体の雰囲気がぐっと明るくなることがあります。
ぜひ、制作されているプロジェクトの中で、合いそうな場面があれば取り入れてみてください。
