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

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

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

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

目次
  1. 回転しながらフェードイン
  2. バネのように伸びるポップアップ
  3. スライス（左→右）
  4. 見出しの下線が中央から左右に伸びる
  5. テキスト無限ループ
  6. 3Dカードが空中で回転バウンドしながら迫ってくる
  7. hoverで背景が中央から左右に流れる
  8. hoverで下線が左右に伸びる
  9. hoverで上に浮かす
  10. 波打つローディングドット
  11. まとめ

回転しながらフェードイン

See the Pen 回転しながらフェードイン by et (@eito-oda) on CodePen.

「回転しながらフェードイン」は、テキストや要素が少し傾いた状態から正位置に戻りつつ徐々に表示されるアニメーションです。スクロールに合わせて現れることで、自然な導入感と立体感を演出できます。

特徴

  • 回転とフェードインを組み合わせ、立体感のある出現演出
  • スクロール位置に応じてアニメーション開始（ScrollTrigger連動）
  • 柔らかいイージング（power2.out）で滑らかに表示

活用シーン

  • 見出しや強調テキストの登場
  • LPやサービス紹介で視線を誘導したい箇所
  • ブログ記事内のポイントや注目情報の提示

メリット

  • 単純なフェードインより視覚的インパクトが強い
  • スクロール連動でページ全体の動きに自然に馴染む
  • ユーザーの注目をスムーズに誘導できる

このアニメーションは、重要な見出しやテキストを目立たせつつ、ページ全体の動きに統一感を出したい場合に最適です。

バネのように伸びるポップアップ

See the Pen バネのように伸びるポップアップ by et (@eito-oda) on CodePen.

「バネのように伸びるポップアップ」は、要素が弾むようにスケールアップして登場するアニメーションです。スクロールに合わせて自然に現れることで、動きにリズム感と遊び心を加えられます。

特徴

  • スケールがゼロからバネのように弾む動きで表示
  • 弾力のあるイージング（elastic.out）で、柔らかく自然な印象
  • 単純なフェードインよりも視覚的インパクトが高い

活用シーン

  • アイコンやボタンの登場
  • 商品やサービス紹介のポイント強調
  • LPやポートフォリオの注目部分

メリット

  • ユーザーの目を自然に引き付けられる
  • ページに動きが加わり、リッチでモダンな印象を演出
  • GSAP × ScrollTriggerを使うことでスクロール連動の滑らかな演出が簡単に実装可能

このアニメーションは、ページ内の注目コンテンツや重要情報を強調したい場面に特に有効です。

スライス（左→右）

See the Pen スライス（左→右） by et (@eito-oda) on CodePen.

「スライス（左上→右下）」は、要素が左上から右下に向かって切り裂かれるように広がるアニメーションです。
スクロールに応じて要素がスムーズに表示され、視覚的に印象的な導入を作ることができます。

特徴

  • 左上から右下に向かって開くマスクアニメーション
  • 要素の登場を動きで強調し、注目を集める
  • シンプルながらも視覚的インパクトが大きい

活用シーン

  • 見出しや画像、カードなどの導入部分
  • LPや企業サイト、ポートフォリオサイトでの注目コンテンツ
  • スクロール連動で演出を加えたい場面

メリット

  • ユーザーの視線を自然に誘導できる
  • ページに動きが加わり、モダンで洗練された印象を与える
  • GSAP × ScrollTriggerで簡単にスクロール連動アニメーションを実装可能

この手法は、ページの第一印象を強化し、ユーザーにインパクトを与えたい場面に特に有効です。

見出しの下線が中央から左右に伸びる

See the Pen 見出しの下線が中央から左右に伸びる by et (@eito-oda) on CodePen.

「見出しの下線が中央から左右に伸びる」は、テキストの中心から左右に向かってラインがスッと広がるアニメーションです。

ユーザーが見出しに目を向けた際に、「自然な注目誘導・リズム感のある演出」を付与できるのが特徴です。

特徴・活用シーン

  • 下線が中央から広がることで、見出しへの視線を自然に誘導
  • ページ内のセクション切り替えやタイトル強調に最適
  • LPやブログ記事、企業サイトなどでテキストをスマートに目立たせたい場面

メリット

  • シンプルながらも動きがあるため、デザインを邪魔せず視覚的アクセントになる
  • CSSのみで軽量に実装でき、パフォーマンスへの影響が少ない
  • ユーザーに「ここが重要」と直感的に伝えやすい

この演出は、文章や見出しにメリハリを付けたい場合に非常に有効です。

テキスト無限ループ

See the Pen テキスト無限ループ by et (@eito-oda) on CodePen.

「テキスト無限ループ」は、背景や装飾としてテキストを横方向に絶え間なく流し続けるアニメーションです。大きめの文字を透明度を下げて表示することで、ページの雰囲気やリズムを演出できます。

特徴

  • 同じテキストが無限に横スクロール
  • 背景としての装飾やモーションデザインに最適
  • CSSアニメーションで滑らかにループ

活用シーン

  • LPやブランドサイトの背景演出
  • 見出しやセクションの雰囲気づくり
  • 文字を使った動的なアート表現

メリット

  • ページに動きとリズム感を与えられる
  • JavaScript不要で軽量に実装可能
  • 無限ループなのでユーザーの滞在時間中ずっと演出が維持できる

このアニメーションは、静的なページに動きを加えたいときや、ブランドの世界観を文字で演出したいときに非常に有効です。

3Dカードが空中で回転バウンドしながら迫ってくる

See the Pen 3Dカードが空中で回転バウンドしながら迫ってくる by et (@eito-oda) on CodePen.

「3Dカードが空中で回転バウンドしながら迫ってくる」は、3D空間上でカードが手前に飛び出しつつ回転し、バウンス効果で弾むように表示される演出です。ユーザーがスクロールしてカードの位置に到達するとアニメーションが発動します。

特徴

  • カードが奥から手前にスライドしつつ回転
  • バウンス効果で弾むように表示
  • 3D視点（perspective）による奥行き感

活用シーン

  • 商品紹介やサービスの特徴を強調したい箇所
  • 重要なCTA（Call To Action）の演出
  • LPやブランドサイトで視覚的なインパクトを出す場面

メリット

  • スクロールに連動することでユーザーの目線を誘導
  • 3Dとバウンス効果で立体的・動的な表現が可能
  • GSAP × ScrollTrigger で滑らかかつ軽量に実装できる

このアニメーションは、ユーザーに動きのある視覚的インパクトを与えたいとき、商品やサービスの注目ポイントを強調したいときに非常に有効です。

hoverで背景が中央から左右に流れる

See the Pen hoverで背景が中央から左右に流れる by et (@eito-oda) on CodePen.

「hoverで背景が中央から左右に流れる」は、ボタンやリンクのホバー時に背景色が中央から左右に広がっていくアニメーションです。テキストは手前に残るため、視覚的に文字が際立ちつつ動きのある演出になります。

特徴

  • ホバー時に背景が中央から左右にスライドして広がる
  • テキストは前面に表示され、色が切り替わる
  • 丸みのあるボタンデザインにも適用可能

活用シーン

  • CTA（Call To Action）ボタン
  • リンクやナビゲーションのホバー演出
  • LPやサービス紹介ページでの注目箇所

メリット

  • ユーザーの操作に応じた視覚的なフィードバックを提供
  • シンプルなCSSとトランジションで軽量に実装可能
  • UIの動きに高級感や遊び心を付与

この手法は、クリックさせたいボタンやリンクに自然な誘導を与えつつ、サイト全体のデザインに動きを加えたいときに効果的です。

hoverで下線が左右に伸びる

See the Pen hoverで下線が左右に伸びる by et (@eito-oda) on CodePen.

「hoverで下線が左右に伸びる」は、テキスト下のラインがホバー時に左右に広がるアニメーションです。中央から始まる下線が左右に伸びることで、自然な視線誘導と動きのある演出を実現します。

特徴

  • ホバーで下線が中央から左右に広がる
  • テキスト自体は動かず、下線のみがアニメーション
  • CSSのlinear-gradientとカスタムプロパティで実装

活用シーン

  • 見出しやリンクのアクセント
  • LPやブログ記事で重要なキーワードを強調
  • ナビゲーションメニューのホバー効果

メリット

  • ユーザーの注目を自然に引きつけられる
  • 軽量なCSSのみで実装可能
  • デザインのアクセントとして応用しやすい

この手法は、テキストの強調やリンクのホバー時の視覚的フィードバックを簡単に加えたい場合に最適です。

hoverで上に浮かす

See the Pen hoverで上に浮かす by et (@eito-oda) on CodePen.

「hoverで上に浮かす」は、マウスホバー時に要素が少し持ち上がる演出です。立体感やインタラクティブ感を与え、ユーザーにクリックや注目を促す効果があります。

特徴

  • ホバーで要素が上方向に移動
  • 同時に影が濃くなり立体的に見える
  • CSSのtransform: translateYとbox-shadowで実装

活用シーン

  • 画像やカードコンテンツのホバー演出
  • ボタンやリンクのアクセント
  • ポートフォリオやECサイトの商品カード

メリット

  • ユーザーに視覚的な反応を与え、操作性向上
  • CSSのみで軽量に実装可能
  • デザインに柔らかい動きと高級感をプラス

この手法は、カードや画像を立体的に魅せたい場面やホバーで注目させたい要素に最適です。

波打つローディングドット

See the Pen 波打つローディングドット by et (@eito-oda) on CodePen.

「波打つローディングドット」は、3つのドットが順番に膨らんだり縮んだりして波のように動くアニメーションです。読み込み中の状態を視覚的にわかりやすく伝え、ユーザーに待機時間の目安を示す効果があります。

特徴

  • 複数のドットが交互に拡大・縮小して波のように動く
  • CSSアニメーションのみで軽量に実装可能
  • 待機中の視覚的フィードバックとして直感的

活用シーン

  • ページやコンテンツの読み込み時
  • データ取得中や処理待ち状態の表示
  • ローディング中の画面演出

メリット

  • ユーザーに「待つ時間が発生している」ことを自然に伝えられる
  • 実装が簡単で軽量、負荷が少ない
  • デザインのアクセントとしても使える

この手法は、読み込み中のステータスをわかりやすく、視覚的に楽しく見せたい場面に最適です。

まとめ

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

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

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