WebサイトやLPを「良く見せたい」「ユーザーの視線を引きつけたい」
──そんな時に役立つのが CSS/JSアニメーション です。
今回は、コピペでそのまま使える 「CSS/JSアニメーション集10選」をまとめました。
デザインを邪魔せず、どのジャンルのサイトにも取り入れやすい動きを中心に掲載しているため、
ポートフォリオ・企業サイト・EC・サービス紹介ページなど、幅広い場面で活用できます。
制作にすぐ導入できる内容となっていますので、ぜひ気になるものから試してみてください。
左右に揺れながらフェードイン
See the Pen 左右に揺れながらフェードイン（自然な感じ） by et (@eito-oda) on CodePen.
「左右に揺れながらフェードイン」は、横方向の揺れ（バウンス感）とフェードインを同時に組み合わせた演出です。
スクロールして要素が表示領域に入った瞬間、テキストが左からスッと滑り込み、弾むように揺れながら止まるため、静的な表示に比べて視線誘導と印象付けが強く行えます。
特徴
- テキストが左から滑らかに移動しながら透明 → 不透明へ切り替わる
- バウンド感のある動きで柔らかい印象・演出性を強調
- ScrollTriggerによりスクロール位置と完全連動
活用シーン
- セクションタイトルに視線を集めたいとき
- 説明文・キャッチコピーを印象的に登場させたいとき
- LPやコーポレートサイトのファーストビュー直下など「スクロール後すぐに読ませたい箇所」
メリット
- 動きの柔らかさによってブランド性・デザイン性を高められる
- 動きすぎず読みやすさを損なわないバランスのいい演出
- 実装コードがシンプルで、複数要素にも簡単に適用可能
「読み始めてもらうための最初の一押しがほしい」場面に特に効果的なアニメーションです。
誘導 → 読み開始の流れが自然に生まれるため、LP・採用サイト・サービス紹介ページなどとの相性が抜群です。
Y軸回転ポップアップ
See the Pen Y軸回転ポップアップ by et (@eito-oda) on CodePen.
スクロールに合わせて要素が Y軸方向にくるっと回転しながらポップアップ表示されるアニメーションです。
カードがひっくり返るような動きが特徴で、視線を強制的に奪うインパクトのある登場演出を実現できます。
GSAPとScrollTriggerを使用することで、画面に入ったタイミングで自然に発動し、操作性を損なわない演出が可能です。
特徴
- Y軸方向に360°回転しながら要素が表示されるダイナミックなアニメーション
- 単なるフェードインよりも強い存在感と視認性を確保できる
- 回転・透明度・速度を調整することで多彩な表現に応用可能
- GSAPを使用するため動作は滑らかでパフォーマンスも高い
活用シーン
- サービス説明・実績紹介などの重要セクションタイトルの演出
- カード型デザインやボックスコンテンツの登場演出
- LPやブランドサイトなど印象づけたいページでの視覚強調
- 見せ場をつくりたいスクロール演出のアクセントとして
メリット
- 見出しを強調でき、ユーザーの視線誘導に効果的
- 動きのあるビジュアルでページのクオリティが一気に上がる
- GSAP使用のため動きが滑らかでプロフェッショナルな印象を与える
- 表示タイミング制御が可能で無駄なアニメーションが発生しない
Y軸回転ポップアップは、ただ情報を並べるだけでなく 「見せる・惹きつける」デザインへ進化させたい場合に最適なアニメーションです。
インパクトが強く、視認性・訴求効果ともに高いため、重要セクションの演出に取り入れることでページ全体の完成度を大きく高められます。
画像がマスクされて下から出現
See the Pen 画像がマスクされて上から出現 by et (@eito-oda) on CodePen.
画像を一気に表示するのではなく、外枠（マスク）の中から上方向にスライドして出現させるアニメーションです。
ふわっと登場するため視線を自然に誘導でき、プロモーションサイトやポートフォリオなどで洗練された第一印象を与えられる表現として人気があります。
特徴
- 画像が徐々に現れるため、視線誘導効果が非常に高い
- インパクトはあるのに不快にならず、UXを損なわない動き
- 「フレーム」「トリミング」「マスク」を活かしたデザイン性の高い演出
- 写真・人物・製品イメージなどどんな画像にも応用できる汎用性
活用シーン
- サービス紹介セクションの画像登場アニメーション
- LP（ランディングページ）のファーストビューの訴求
- ポートフォリオや実績紹介のサムネイル
- SNSリンク・製品カード・ギャラリーなどの画像グリッド演出
メリット
- 高級感・スタイリッシュさが演出でき、ブランドイメージを大きく向上
- 普通のフェードインよりも印象に残りやすく記憶に定着させやすい
- 動きがシンプルなので閲覧のストレスや読み疲れを生まない
- GSAPやCSSのみなど幅広い実装方法で導入しやすい
画像がマスクされて上から出現するアニメーションは、視線誘導・印象アップ・デザイン性の強化を同時に実現できる強力な演出です。
スタイリッシュで洗練された雰囲気を作りたいサイトに特に効果的で、プロダクト紹介・ポートフォリオ・LPのメインビジュアルなど幅広い場面で活躍します。
強い主張をせず自然に惹きつけられる「上品な魅せ方」をしたい時に最適です。
文章が「行単位」でスクロール出現
See the Pen 文章が「行単位」でスクロール出現 by et (@eito-oda) on CodePen.
文章全体を一度に表示するのではなく、1行ずつ順番に表示させるアニメーションです。
スクロール位置に応じて行がふわっと現れるため、読み手の目線を自然に誘導でき、情報をじっくり伝えたいテキストコンテンツと相性抜群の演出です。
特徴
- 一文ずつ登場することで読み進めやすく、離脱しにくい
- 行ごとにアニメーションすることで内容にリズム・没入感が生まれる
- 長文でも「圧迫感」がなく、読んでほしい文章をしっかり届けられる
- 複数行の文章・説明文・リストにもそのまま応用できる柔軟性
活用シーン
- ミッション・理念・企業コンセプトなどのテキスト表現
- サービス紹介の説明文・特徴の箇条書き
- ストーリーページ・採用サイト・ブランドサイトなど
文章で世界観を表現するページ - LPの途中でユーザーを引き止めたい訴求ブロック
メリット
- スクロールと同期するため強制感がなく自然に読ませられる
- 一行ずつ現れるため重要度・メッセージ性が高く感じられる
- 文章量が多いサイトでも読みやすくて疲れない
- GSAP・CSSのみなど実装方法を選べて導入しやすい
文章が「行単位」でスクロール出現する演出は、文章をしっかり読んでもらいたいページに最適なアニメーションです。
表示にメリハリが生まれ、読み飛ばし防止・理解度向上・印象アップに貢献します。
押し付け感なく 「自然に読ませる UI」 を実現できるため、ビジネス・採用・ブランド・商品紹介など幅広い用途で活躍します。
上下にふわふわ移動
See the Pen 上下にふわふわ移動 by et (@eito-oda) on CodePen.
上下にふわふわと浮遊するアニメーションは、軽やかで柔らかい印象を与え、ページに動きのリズムを加える演出です。各要素が異なる速度で揺れることで、自然な浮遊感を演出でき、静的なコンテンツにアクセントをつけるのに最適です。
特徴
- 上下にゆったり揺れる「ふわふわ感」で柔らかい印象を与える
- 要素ごとに異なる速度・タイミングを設定でき、自然な動きを再現
- 無限ループでページ全体の動きを損なわず、常に視覚的なアクセントを提供
活用シーン
- 泡・雲・風船・光・植物・キャラクターなど柔らかさ・軽さ・癒し・浮遊感を表現したいとき
- ファーストビューの背景演出やビジュアル装飾に静止しているだけの画像に動きを加えて印象アップ
- サービスサイト・美容・ウェルネス・子ども向けデザインなど温かさ・優しさを届けたいジャンル
- スクロール誘導アニメーションのワンポイントモーション演出
メリット
- 視線を奪わないためコンテンツの邪魔をせずに存在感を出せる
- 繰り返しのループ動作で画面が止まらず「生きたサイト」に見える
- 最小限の画像・コードで実装でき、軽量で高速
- 他のアニメーションと干渉しにくく、
背景演出として追加しやすい
上下にふわふわ動くアニメーションは、ページに柔らかさとリズムを加え、注目させたい要素を自然に目立たせる手法です。装飾やアイキャッチとして幅広く活用できます。
3Dカードが前方にバウンドし登場
See the Pen 3Dカードが前方にバウンドし登場 by et (@eito-oda) on CodePen.
3Dカードが前方にバウンドしながら登場する演出は、奥行きのある立体感と跳ねる動きによって、ユーザーの視線を自然に引きつけるアニメーションです。スクロールに連動して発動するため、ページを閲覧する流れの中でダイナミックにコンテンツを表示できます。
特徴
- 奥から手前に迫る3D立体感とバウンス動作で視覚的インパクトが高い
- スクロールに連動して自然に発動するため、体験に遊び心を加えられる
- カードやボックス型の要素を目立たせる演出に最適
活用シーン
- サービスや商品の注目ポイントを強調したいとき
- LPやコンセプトサイトでの重要コンテンツ表示
- キャンペーンやイベント情報のアクセント演出
メリット
- 立体感と動きで存在感を強調できる
- バウンス効果でユーザーの視線を自然に誘導できる
- ScrollTriggerで制御可能なため簡単にスクロール連動アニメが実装できる
- コードがシンプルで軽量・高速に動作
3Dカードの前方バウンス登場は、平面的なページに立体感と動きを加え、重要コンテンツを目立たせる演出です。スクロール体験にアクセントを加えたい場面で非常に有効です。
hoverで波紋が広がる（四角形）
See the Pen hoverで波紋が広がる（四角形） by et (@eito-oda) on CodePen.
hover時にボタンから波紋が四角形に広がるアニメーションは、ユーザーの操作に応じて視覚的なフィードバックを与えるインタラクティブな演出です。四角形の波紋が中心から広がることで、クリック可能な要素であることを直感的に伝え、動きのある印象をページに加えられます。
特徴
- ボタンやリンクにマウスを乗せると、中心から四角形の波紋が広がる
- 色やサイズ、アニメーション速度を調整可能で、柔軟な演出が可能
- CSSアニメーションで軽量かつスムーズに動作
活用シーン
- CTA（Call To Action）ボタンの視認性を高めたい場面
- ホームページやLPでインタラクティブな操作感を演出したい場合
- メニューやカードなど、クリック可能な要素のアクセント
メリット
- ユーザーの操作に対して明確なフィードバックを提供
- ページに動きが加わることで視覚的な印象が向上
- 実装が簡単で、パフォーマンス負荷も低く保てる
hoverで波紋が広がる四角形アニメーションは、操作感の向上と視覚的なアクセントを同時に実現できる手法です。CTAボタンやリンクの存在感を自然に引き立てるのに最適です。
hoverで二重下線が左右から伸びる
See the Pen hoverで二重下線が左右から伸びる by et (@eito-oda) on CodePen.
hover時に二重下線が左右からスッと伸びるアニメーションは、見出しやテキストに対して動きと強調を与える演出です。左右から線が出現することで、単なる下線よりも印象的でモダンなデザインを実現できます。
特徴
- マウスを乗せると二重の下線が左右から同時に伸びる
- CSSの線形グラデーションとカスタムプロパティで軽量に実装可能
- シンプルながら視覚的に動きがあるので注目度が高い
活用シーン
- 見出しや重要なテキストのアクセントに
- ナビゲーションリンクやボタンの装飾として
- LPやブログ記事などで情報を段階的に強調したい場面
メリット
- 視覚的に印象的で、ユーザーの注目を自然に誘導できる
- 軽量なCSSのみで実装でき、パフォーマンスに優しい
- デザインにモダンさや動的要素を加えることができる
hoverで二重下線が左右から伸びる演出は、シンプルながら視覚的インパクトが高く、見出しやリンクの強調に最適な手法です。モダンなUIデザインのアクセントとして活用できます。
hoverで角丸にする
See the Pen hoverで角丸にする by et (@eito-oda) on CodePen.
hover時に要素が角丸になる演出は、ユーザーの操作に応じて柔らかい印象を与えるシンプルなアニメーションです。画像やボックスなどに適用することで、インタラクティブな雰囲気を演出できます。
特徴
- マウスを乗せると角が滑らかに丸くなる
- CSSの
border-radiusとトランジションで軽量に実装可能 - 視覚的に柔らかさや動きを加えることができる
活用シーン
- 画像ギャラリーやカード型コンテンツのアクセントに
- ボタンやリンクのインタラクティブ効果として
- LPやブログ記事で視覚的な遊び心を加えたい場合
メリット
- 実装が簡単でCSSのみで対応可能
- ユーザー操作に応じた自然な視覚フィードバックを提供
- デザインに柔らかさや動的要素を加え、印象を向上させる
hoverで角丸に変化する演出は、簡単ながら柔らかい印象とインタラクティブ感を与えるデザイン手法です。画像やカードコンテンツにアクセントとして活用できます。
ドットがバウンドするローディング
See the Pen ドットがバウンドするローディング by et (@eito-oda) on CodePen.
ドットが上下にバウンドするローディングアニメーションは、シンプルながら視覚的に動きを感じられる待機演出です。小さなドットがリズミカルに跳ねることで、ユーザーに「読み込み中」を自然に伝えることができます。
特徴
- 複数のドットが交互に上下にバウンド
- CSSアニメーションのみで軽量に実装可能
- リズム感があり、シンプルで目を引くデザイン
活用シーン
- ページやコンテンツの読み込み中に表示
- 非同期データ取得や画像ロード時の待機表示
- サイトやアプリのローディング画面での視覚的演出
メリット
- 実装が簡単で軽量、パフォーマンスに影響しにくい
- ユーザーに待機中であることを直感的に伝えられる
- シンプルながらリズミカルで飽きにくいデザイン
ドットがバウンドするローディングは、軽量で視覚的にわかりやすく、シンプルに動きを表現できる待機演出です。ウェブサイトやアプリでの読み込み中に最適なデザイン手法です。
まとめ
アニメーションは、派手さよりも 「適切な場面で、適切な動きを使うこと」が大切です。
ほんの少し動きを加えるだけでも、サイトの印象・読みやすさ・使いやすさは大きく変わります。
今回紹介したアニメーションはどれも 軽量・シンプル・汎用性が高い ものばかりです。
動きのあるレイアウトを少し加えるだけでも、サイト全体の雰囲気がぐっと明るくなることがあります。
ぜひ、制作されているプロジェクトの中で、合いそうな場面があれば取り入れてみてください。
