WebサイトやLPを「良く見せたい」「ユーザーの視線を引きつけたい」
──そんな時に役立つのが CSS/JSアニメーション です。
今回は、コピペでそのまま使える 「CSS/JSアニメーション集10選」をまとめました。
デザインを邪魔せず、どのジャンルのサイトにも取り入れやすい動きを中心に掲載しているため、
ポートフォリオ・企業サイト・EC・サービス紹介ページなど、幅広い場面で活用できます。
制作にすぐ導入できる内容となっていますので、ぜひ気になるものから試してみてください。
奥から手前にズームしながらフェードイン (3D風)
See the Pen 奥から手前にズームしながらフェードイン (3D風) by et (@eito-oda) on CodePen.
奥から手前にズームしながらフェードインする3D風アニメーションで、スクロール時に自然な立体感と動きを与える見出し演出です。GSAPを使用してスムーズかつ軽量に実装できます。
特徴
- 要素が奥から手前に向かってスケールアップ
- フェードインとズームを組み合わせた3D風の立体的な動き
- GSAPとScrollTriggerでスクロール連動が簡単に実装可能
- フォントやコンテンツに動きを加えて視線を誘導
活用シーン
- ブログ記事やLPの見出し演出
- サービス紹介や特徴セクションの強調
- スクロールに合わせたインタラクティブ演出
- ポートフォリオや作品紹介で動きのある表現
メリット
- ページに奥行き感と動きをプラスできる
- ユーザーの注目を自然に引きつけられる
- シンプルな設定で高度な3D表現が可能
- スクロール連動なので読み進める体験にメリハリを与える
スクロールに合わせて奥から手前にズームしながらフェードインする演出は、立体感と動きを兼ね備えた見出し表現です。視線誘導や注目ポイントの強調に最適で、LPやブログ、ポートフォリオに取り入れやすいアニメーションです。
ブルッと揺れる
See the Pen ブルッと揺れる by et (@eito-oda) on CodePen.
スクロール時に要素がブルッと小刻みに揺れるアニメーションです。短い往復動作で振動するように見せ、注目を集める効果があります。GSAPを使って簡単に実装可能です。
特徴
- 要素が左右に小刻みに揺れる（ブルブル動く）
- 短時間の往復アニメーションで視覚的にインパクト
- ScrollTriggerでスクロール連動可能
- 見出しやボタンなど注目させたい要素に適用
活用シーン
- ブログ記事やLPの見出し強調
- ボタンやCTAの注目演出
- ポートフォリオの作品紹介でのインパクト付与
- 注意喚起や動きのアクセントをつけたい箇所
メリット
- 短いアニメーションで注目度を高められる
- コードがシンプルで軽量
- 目立たせたい要素に自然に視線を誘導可能
- スクロールに合わせることでユーザー体験が向上
ブルッと揺れるアニメーションは、短時間の往復動作で要素を目立たせる効果があります。スクロール連動で表示させると、ブログやLPでの注目ポイントに最適な演出です。
スキャンラインで塗りつぶす（上→下）
See the Pen スキャンラインで塗りつぶす（上→下） by et (@eito-oda) on CodePen.
スクロールに連動して、見出しの上から下へスキャンラインのように色が塗りつぶされるアニメーションです。塗りつぶしが進むことで文字が浮かび上がる視覚効果があり、インパクトのある演出が可能です。
特徴
- 上から下へスキャンラインが流れる塗りつぶしアニメーション
- mix-blend-modeで文字と背景を自然に重ね合わせ
- ScrollTriggerでスクロールに合わせて発動
- 見出しやキャッチコピーなどの注目要素に適用可能
活用シーン
- ブログ記事やLPのタイトル演出
- ポートフォリオサイトで作品名を強調
- キャンペーンやお知らせなどの目立たせたい箇所
- スクロールアニメーションでユーザーを惹きつける場面
メリット
- 簡単なコードで視覚的インパクトを演出
- スクロール連動で自然な注目誘導が可能
- 文字の塗りつぶしで動きを出しつつ読みやすさも確保
- 見出しに奥行きや動きを加えられる
「スキャンラインで塗りつぶす」アニメーションは、スクロールに合わせて文字が上から下へ浮かび上がる演出です。ブログやLPの見出しに使うことで、自然に視線を集めつつインパクトを与えられます。
スクロールで上下反転フリップ（Y回転）
See the Pen スクロールで上下反転フリップ（Y回転） by et (@eito-oda) on CodePen.
スクロールに連動して見出しが上下に反転（Y軸回転）するアニメーションです。フリップすることで立体感や動きを加え、スクロール時に注目を集める演出が可能です。
特徴
- Y軸回転による上下反転フリップアニメーション
- ScrollTriggerでスクロール位置に応じて回転
- backface-visibilityで裏面が見えない処理
- 立体的な動きで視覚的インパクトを演出
活用シーン
- ブログ記事やLPのセクション見出し
- ポートフォリオやサービス紹介での注目タイトル
- スクロール演出でユーザーにインパクトを与えたい場面
- 他のアニメーションとの組み合わせによる演出強化
メリット
- スクロールに応じて動くので自然に注目を誘導
- 単純な回転だけで立体的かつ印象的な演出
- コード量が少なく実装しやすい
- 動きで視線を誘導でき、コンテンツの魅力を引き立てる
「スクロールで上下反転フリップ（Y回転）」は、スクロールに合わせて見出しが立体的に反転する演出です。シンプルながらも目を引く動きで、ブログやLPの注目タイトルに効果的です。
しずく連続落下ドリップ
See the Pen しずく連続落下ドリップ by et (@eito-oda) on CodePen.
しずくが連続して落下するアニメーションです。小さなドットが上から下へ落ち、繰り返しループすることで水滴や液体のイメージを表現できます。シンプルながら動きで視覚的なアクセントを作ることができます。
特徴
- 小さな丸（しずく）が上から下に落ちるループアニメーション
- GSAPを使用したスムーズな落下とフェードアウト
- onRepeatで繰り返し、無限に落下する演出
- 軽量でシンプル、複雑な構造不要
活用シーン
- ウェブサイトで水や雨、液体をイメージした演出
- カフェや飲食、自然系のブログやLPの装飾
- スクロールやホバー時の注目エフェクトとして
- 小さな視覚的アクセントとして他アニメーションと組み合わせ
メリット
- コードが簡単で実装しやすい
- ループで常に動くので視覚的にリズムを作れる
- 見た目のインパクトが小さくてもユーザーの目を引く
- デザインの雰囲気を柔らかく、遊び心ある印象にできる
「しずく連続落下ドリップ」は、シンプルな丸が連続で落ちることで水滴のような動きを表現するアニメーションです。軽量で実装しやすく、ウェブサイトの装飾やアクセントに最適です。
Vanta.js：地球儀
See the Pen vanta.js：地球儀 by et (@eito-oda) on CodePen.
Vanta.jsを使用した3D地球儀アニメーションです。インタラクティブな地球儀が画面上に表示され、マウス操作やタッチ操作で回転させることができます。動的で視覚的に印象的な背景やヘッダー演出に最適です。
特徴
- 3Dの地球儀がリアルタイムで回転
- マウスやタッチ操作で自由に回転可能
- 軽量なライブラリで簡単に実装可能
- スクロールや他アニメーションとの干渉が少ない
- scaleやscaleMobileで表示サイズを柔軟に調整
活用シーン
- 企業サイトやサービス紹介での世界規模のイメージ演出
- IT・テクノロジー系のブログやポートフォリオサイト
- 背景アニメーションやヒーローセクションの装飾
- 地域・国際情報を扱うサイトでのインタラクティブ要素
メリット
- ユーザーに印象的な3D演出を提供できる
- コード量が少なく、導入が容易
- インタラクティブな操作でエンゲージメントを向上
- モバイルにも対応可能で幅広いデバイスで使用できる
「Vanta.js：地球儀」は、インタラクティブな3D地球儀を簡単に実装できるアニメーションです。背景やヘッダーに設置するだけで、ウェブサイトの世界観をダイナミックに演出できます。
複数レイヤーのパララックス（ホバーで擬似パララックス）
See the Pen 複数レイヤーのパララックス（ホバーで擬似パララックス） by et (@eito-oda) on CodePen.
複数レイヤーを重ねた要素にホバーすると、奥行き感のあるパララックス効果が発生する見出しアニメーションです。背景、中景、前景のレイヤーがそれぞれ異なる速度で動くことで、立体的でダイナミックな演出を実現します。
特徴
- 背景（bg）、中景（mid）、前景（fg）の3層構造
- ホバー時に各レイヤーが異なる移動量で動く
- 擬似的な3Dパララックス表現
- 軽量なCSSのみで簡単に実装可能
- スムーズなトランジションで自然な動き
活用シーン
- ポートフォリオサイトの見出しやセクションタイトル
- 商品紹介ページでの注目要素演出
- クリエイティブ系ブログやデザインサイト
- ホバーでインタラクティブな印象を与えたい要素
メリット
- 立体的で動きのあるデザインを簡単に導入できる
- CSSのみで実装可能、外部ライブラリ不要
- ユーザーの目を引き、注目度を向上
- レイヤーごとに異なる動きで深みのある表現
hoverで上に移動
See the Pen hoverで上に移動 by et (@eito-oda) on CodePen.
文字にホバーすると、ゆるやかに上方向へ移動するシンプルなアニメーションです。わずかな動きで視線を引きつけつつ、自然なインタラクションを演出できます。
特徴
- ホバー時に文字が上にスライド
- CSSのみで簡単に実装可能
- 軽量で読み込みに影響しない
- トランジションで滑らかに動く
活用シーン
- ブログ記事の見出しやサブタイトル
- ボタンやリンクのアクセント演出
- コンテンツ内で視線誘導したい箇所
メリット
- シンプルながら視覚的なインパクトを追加
- JavaScript不要で軽量
- サイト全体の操作感を自然に向上
- 他のアニメーションと組み合わせやすい
「hoverで上に移動」は、控えめながら視覚的なアクセントを加える見出しアニメーションです。シンプルな演出でありながら、ユーザーの目を引くデザインが可能です。
回転スクエアローディング
See the Pen 回転スクエア by et (@eito-oda) on CodePen.
四角形が中心を軸にくるくると回転するシンプルなローディングアニメーションです。回転の動きで視覚的に進行状況を示し、待機時間中もユーザーの注意を引きつけます。
特徴
- 正方形が360°回転
- CSSのみで軽量に実装可能
- シンプルで目を引くデザイン
- アニメーションは無限ループ
活用シーン
- ページ読み込み中のローディング表示
- データ取得や処理待ちの演出
- アプリやウェブサイトでの動的コンテンツ表現
メリット
- 実装が簡単で軽量
- 待機時間を視覚的に知らせられる
- シンプルなのでどんなデザインにも馴染む
- CSSだけでアニメーションを完結できる
「回転スクエアローディング」は、四角形が回転することでユーザーに動きを与え、待機時間中でも視覚的な楽しさを提供するシンプルかつ使いやすいローディングアニメーションです。
ねじれポップアップ
See the Pen ねじれポップアップ by et (@eito-oda) on CodePen.
オブジェクトが小さく縮み、少しねじれながら元の位置とサイズにポップアップするアニメーションです。スクロールに合わせて表示されることで、注目度の高い動きを演出できます。
特徴
- スケールと回転を組み合わせたねじれポップアップ
- フェードインと同時に立体的な動きを表現
- スクロールトリガーで発動する自然な演出
- GSAPを使った滑らかなアニメーション
活用シーン
- 記事内の注目コンテンツ表示
- 商品やサービスの紹介セクション
- ポップアップ式のキャッチコピー演出
メリット
- ユーザーの視線を誘導できる
- 立体感のある動きでインパクトを与えられる
- 実装が簡単でカスタマイズも自由
- スクロール連動で自然な表示タイミングを設定可能
「ねじれポップアップ」は、スクロールに応じて回転しながらポップアップする動きで、ユーザーの注目を集める効果的な見出しアニメーションです。シンプルながら立体感のある表現が特徴で、記事やコンテンツのアクセントに最適です。
まとめ
アニメーションは、派手さよりも 「適切な場面で、適切な動きを使うこと」が大切です。
ほんの少し動きを加えるだけでも、サイトの印象・読みやすさ・使いやすさは大きく変わります。
今回紹介したアニメーションはどれも 軽量・シンプル・汎用性が高い ものばかりです。
動きのあるレイアウトを少し加えるだけでも、サイト全体の雰囲気がぐっと明るくなることがあります。
ぜひ、制作されているプロジェクトの中で、合いそうな場面があれば取り入れてみてください。
