WebサイトやLPを「良く見せたい」「ユーザーの視線を引きつけたい」
──そんな時に役立つのが CSS/JSアニメーション です。
今回は、コピペでそのまま使える 「CSS/JSアニメーション集10選」をまとめました。
デザインを邪魔せず、どのジャンルのサイトにも取り入れやすい動きを中心に掲載しているため、
ポートフォリオ・企業サイト・EC・サービス紹介ページなど、幅広い場面で活用できます。
制作にすぐ導入できる内容となっていますので、ぜひ気になるものから試してみてください。
複数カルーセルフェードイン
See the Pen カルーセルフェードイン by et (@eito-oda) on CodePen.
スクロールに合わせて複数の要素が立体的にくるっと回転しながら、手前へフェードインして並ぶ演出です。カルーセルのように横に並んだボックスが順番に出現していくため、「一つずつ現れるワクワク感」と「3Dらしい存在感」を同時に演出できるのが特徴です。
GSAPの rotationY と z（奥行き）を組み合わせることで、平面ではなく立体的な「回り込み」を表現しており、グラフィカルなUIとの相性も抜群。遅延（stagger）を利用して要素をひとつずつ出現させることで、情報を段階的に伝える効果があり、ユーザーの視線誘導にも効果的です。
サービス紹介・商品一覧・制作実績・カードコンテンツなど、複数ブロックを並べる場面でリッチな印象を持たせたい時に最適のアニメーションです。
バウンス ポップアップ
See the Pen バウンス ポップアップ by et (@eito-oda) on CodePen.
画面内に入ったタイミングで、要素が小さく縮んだ状態から一気に弾むように大きさを戻して登場するアニメーションです。
バウンドする動きによって、視覚的な楽しさと強い訴求力を生み出せるのが特徴で、ユーザーの注意を一瞬で集めたい場面に最適です。
ふわっと出るフェードインと違い、「ポップに跳ねる」「元気がある」「アクティブ」な印象を与えるため、
・ボタン
・バナー
・アイキャッチブロック
・アプリやサービスの特徴アイコン
など、クリックや注目を誘導したい UI との相性が抜群。
一見派手な動きながら、bounce.out のイージングによって自然な弾力感があり、楽しさを演出しつつUXを損なわないのもポイント。
ユーザーに「タップしたくなる」「読み進めたくなる」感情をつくりたい時に非常に効果的なアニメーションです。
上スライドマスクで文字が出現
See the Pen 上スライドマスクで文字が出現 by et (@eito-oda) on CodePen.
文字を覆っている「マスク」が上方向からスライドしながら外れることで、文字が浮かび上がるように見える演出です。
テキストをただ表示するのではなく、瞬間的な注目・読み始めのリズム作り・高級感の演出を目的に使われることが多いアニメーションです。
スクロールでトリガーされるため、ユーザーが見出しの位置に到達したタイミングで自然に発動し、
LP・サービス紹介セクション・コンセプト文などで「読み手の集中を引き寄せたい場面」で特に効果を発揮します。
また、CSSのclip-pathで文字を覆うマスクを作成し、GSAPでクリップ領域を滑らかに解除することで
ブラウザ依存の少ない表現 × 実装の軽さ × ハイクオリティなアニメーションを両立しているのも魅力です。
横スクロール
See the Pen 横スクロール by et (@eito-oda) on CodePen.
「横スクロールアニメーション」は、通常の縦スクロールの流れの中で、視界を横方向に切り替える演出です。
ユーザーが画面をスクロールすると、 pinned（固定）されたエリアの中で横にコンテンツが流れていき、『「ストーリーが広がっていくような没入感・映像的な体験」』を生み出せるのが特徴です。
横に展開するビジュアル/テキストが次々と切り替わるため、
・世界観の提示
・ブランドの物語性
・サービスの特徴を段階的に伝えたい場面
と非常に相性が良く、LPやコンセプトサイトで人気の高い手法です。
GSAP × ScrollTrigger の組み合わせにより、スクロール量に応じて横スクロールを精密に制御できるため、カクつきのない滑らかな移動・負荷の低さ・実装のシンプルさを両立しています。
バックカラー付きスクロールバー
See the Pen バックカラー付きスクロールバー by et (@eito-oda) on CodePen.
「バックカラー付きスクロールバー」は、ページ上部に配置された縦ラインがアニメーションし、スクロールを促す視覚的インジケーターとして機能する演出です。
背景色の付いたバーの上を濃い色のバーが伸縮しながら流れることで、まるで「ページを読み進めてほしい」と誘導しているようなデザインになります。
一般的な矢印やテキストの誘導と比べて、よりスタイリッシュ・モダン・UI的なアプローチで視線を下方向へ誘導できるため、Webトレンド感のあるヒーローセクションに最適なアニメーションです。
チェックマークがポップアップして出現するアニメーション（成功アイコン）
See the Pen チェックマークがポップアップして出現するアニメーション（成功アイコン） by et (@eito-oda) on CodePen.
チェックマークがポップアップしながら現れるこのアニメーションは、「成功」「完了」「達成」を視覚的に伝える演出に特化したモーションです。
丸枠がふわっと拡大しながら出現し、続いてチェックラインが描かれることで、「タスク完了」や「送信成功」を直感的に伝える表現ができます。
アプリやSaaSのUIでも頻繁に使われるスタイルで、ユーザーに安心感と達成感を与えられることが大きな特徴です。
3Dパネルが右奥から全面に向かってスライドイン
See the Pen 3Dパネルが右奥から全面に向かってスライドイン by et (@eito-oda) on CodePen.
右奥から前方へ向かってパネルが近づいてくるように表示される、奥行きのある 3D スライドイン演出です。
パネルは立体的に回転した状態からスタートし、徐々に正面へ向きながら手前にせり出してくるため、スクロールに合わせて 飛び出してくる迫力あるアニメーション を実現できます。
ただのフェードインやスライドインと違い、視覚的なインパクトと 「奥行き感」 をしっかり伝えられるのが大きな魅力です。
hoverで背景が左から右に流れる
See the Pen hoverで背景が左から右に流れる by et (@eito-oda) on CodePen.
リンクやボタンにカーソルを乗せた瞬間、背景色が左方向から右方向へ流れるように広がるホバーアニメーションです。
テキストはそのまま保持しつつ、背景のみがスライドするため、クリック可能エリアであることを視覚的に強く伝える効果があります。
ホバー時に背景が完全に切り替わるため、ボタンの「反応」がしっかり見える、満足度の高いインタラクションを実現できます。
hoverで下線がスッと出る
See the Pen hover時下線がスッと出る by et (@eito-oda) on CodePen.
テキストにカーソルを乗せたとき、下線がスッと自然に現れるシンプルなホバーアニメーションです
文字の色やサイズは変えず、ボーダーのみが表示されるため、控えめながらもしっかり「リンクであること」を伝えることができます。
hoverで影を付与
See the Pen hoverで影を付与 by et (@eito-oda) on CodePen.
画像やボックスにマウスカーソルを合わせた際、柔らかい影が現れるアニメーションです。
立体感を加えることで、ページにメリハリを持たせつつ、ユーザーの視線を自然に誘導できます。
まとめ
アニメーションは、派手さよりも 「適切な場面で、適切な動きを使うこと」が大切です。
ほんの少し動きを加えるだけでも、サイトの印象・読みやすさ・使いやすさは大きく変わります。
今回紹介したアニメーションはどれも 軽量・シンプル・汎用性が高い ものばかりです。
動きのあるレイアウトを少し加えるだけでも、サイト全体の雰囲気がぐっと明るくなることがあります。
ぜひ、制作されているプロジェクトの中で、合いそうな場面があれば取り入れてみてください。
