WebサイトやLPを「良く見せたい」「ユーザーの視線を引きつけたい」
──そんな時に役立つのが CSS/JSアニメーション です。
今回は、コピペでそのまま使える 「CSS/JSアニメーション集10選」をまとめました。
デザインを邪魔せず、どのジャンルのサイトにも取り入れやすい動きを中心に掲載しているため、
ポートフォリオ・企業サイト・EC・サービス紹介ページなど、幅広い場面で活用できます。
制作にすぐ導入できる内容となっていますので、ぜひ気になるものから試してみてください。
小さく回転しながらフェード
See the Pen 小さく回転しながらフェード by et (@eito-oda) on CodePen.
「小さく回転しながらフェード」は、要素が縮小した状態から回転しつつ徐々に表示されるアニメーションです。
回転とスケール、フェードを組み合わせることで、動きに立体感とアクセントを付けながら自然に要素を登場させる効果があります。
特徴
- 初期状態で縮小・回転した状態から始まる
- opacityを0→1に変化させるフェードイン
- 回転・スケール・フェードを同時に組み合わせ
- 短時間で目を引くアニメーション
活用シーン
- 見出しやタイトルの登場演出
- サイト内の重要メッセージ表示
- スクロール連動型アニメーションでアクセント付け
- カードやアイコンの登場時
メリット
- コンパクトながら動きに立体感が出せる
- 単純なアニメーションで実装が容易
- ユーザーの目を引きつける注目度の高い表現
- 他のフェードやスライドアニメーションと組み合わせやすい
「小さく回転しながらフェード」は、縮小・回転・フェードを組み合わせた立体的な登場アニメーションで、見出しや重要テキストを印象的に表示できます。
カクッと揺れて姿勢を正すポップ
See the Pen カクッと揺れて姿勢を正すポップ by et (@eito-oda) on CodePen.
「カクッと揺れて姿勢を正すポップ」は、要素が斜めや縮小した状態から勢いよく揺れながら元の位置・大きさに戻るアニメーションです。
ポップでコミカルな動きながらも、要素を自然に注目させる効果があります。
特徴
- 初期状態で回転・縮小・横ずれを伴う
- 「カクッ」と揺れるように戻るアニメーション
back.outイージングで弾むような動き- 短時間で目を引くポップな表現
活用シーン
- 見出しやボタンの登場演出
- サイト内の重要アイコンやコンテンツの注目表示
- スクロールに連動したアニメーションでアクセント付け
- 楽しい雰囲気を演出したいページ
メリット
- ユーザーの視線を効果的に誘導できる
- ポップな印象で親しみやすさを演出
- 短いアニメーションで目立つ表現が可能
- 他のアニメーションと組み合わせやすく汎用性が高い
「カクッと揺れて姿勢を正すポップ」は、回転・縮小・横ずれを伴う弾む動きで要素を自然に目立たせるアニメーション。
見出しやボタンなどに使うことで、サイトに遊び心と注目効果をプラスできます。
縦タイムラインの進捗ドット移動
See the Pen 縦タイムラインの進捗ドット移動 by et (@eito-oda) on CodePen.
「縦タイムラインの進捗ドット移動」は、スクロールに連動してタイムライン上のドットが上下に移動し、時系列や進捗を視覚的に表現するアニメーションです。
ユーザーにコンテンツの流れや進行状況を直感的に伝えることができます。
特徴
- タイムラインの縦線上をドットがスムーズに移動
- スクロール連動で進行状況を視覚化
scrub機能でスクロール速度に応じて動く- 年表やステップの数に応じて柔軟に調整可能
活用シーン
- 会社やサービスの沿革紹介ページ
- プロジェクトの進行状況やロードマップ表示
- 教育コンテンツで学習ステップを示す
- イベントやフェーズのタイムライン表現
メリット
- ユーザーが現在の位置や進捗を直感的に把握できる
- 視覚的な動きでページに動的なアクセントを追加
- 多段の年表やステップ表示にも対応しやすい
- スクロールに連動するので自然な操作感を演出
縦タイムラインの進捗ドット移動は、スクロールに応じてドットが上下することで時系列や進行状況を分かりやすく示す演出。
会社沿革やロードマップ、学習ステップなどの可視化に最適です。
お気に入りアイコン点滅
See the Pen お気に入りアイコン点滅 by et (@eito-oda) on CodePen.
「お気に入りアイコン点滅」は、星マークなどのアイコンがリズミカルに拡大・縮小しながら点滅するアニメーションです。
ユーザーの目を引きつけ、インタラクティブな印象を与える演出として利用できます。
特徴
- アイコンが拡大・縮小しながら点滅
yoyo機能で繰り返し自然に動く- 色やサイズを自由にカスタマイズ可能
- 短いアニメーションで視認性を高める
活用シーン
- お気に入りボタンや「いいね」マークの強調
- プロモーションやキャンペーンの視覚演出
- ページ内の注目ポイントや通知バッジ表示
- アイコンのクリック誘導やインタラクション演出
メリット
- ユーザーの注目を効果的に集められる
- シンプルながら動きでアクセントを追加
- ページ内の重要な要素を自然に強調できる
- 実装が軽量でページ負荷が少ない
「お気に入りアイコン点滅」は、アイコンを拡大・縮小させて点滅させる演出で、注目度を高めるインタラクティブなデザインに最適です。
Vanta.js：リング
See the Pen vanta.js：リング by et (@eito-oda) on CodePen.
「Vanta.js：リング」は、背景に動的なリング状のアニメーションを表示するライブラリ演出です。
マウス操作やスクロールに反応してリングが動き、インタラクティブで近未来的な印象を演出できます。
特徴
- 背景にリング状の動くエフェクトを表示
- マウスやタッチ操作に反応する動的演出
- 軽量かつリアルタイム描画で滑らかに動く
- デザインに応じて色・スケールを自由に調整可能
活用シーン
- サイトのヒーローセクションやトップビジュアル
- テクノロジー系、クリエイティブ系のウェブサイト
- インタラクティブな背景演出やプレゼン資料
- ローディング画面や注目コンテンツの強調
メリット
- ページ全体の印象を近未来的・先進的に演出
- ユーザーの操作に反応してインタラクティブ性を向上
- 実装が簡単で、既存のHTMLに追加可能
- 他のVanta.jsエフェクトと組み合わせても自然に馴染む
「Vanta.js：リング」は、動的なリング状アニメーションで背景を華やかに演出し、ユーザー体験をインタラクティブかつ視覚的に豊かにするデザイン向けの演出です。
波打つラインローディング
See the Pen 波打つライン by et (@eito-oda) on CodePen.
「波打つラインローディング」は、複数の縦線が波のように上下に伸縮して動くアニメーションローディングです。
短時間でリズミカルに動き、視覚的にユーザーの待機時間を軽減する効果があります。
特徴
- 縦線が交互に伸縮して波打つように動く
- 軽量でシンプル、CSSアニメーションのみで実装可能
- 各ラインの動きに時間差をつけることでリズミカルな動きに
- カラーや本数、サイズを自由に調整可能
活用シーン
- ページロードやコンテンツ読み込み中のローディング表示
- サービスやアプリの待機画面、インタラクティブ演出
- ミニマルデザインのWebサイトでのアクセント演出
メリット
- シンプルながら動きがあるので、ユーザーの待機ストレスを軽減
- 実装が簡単で既存サイトにも手軽に追加可能
- デザインに合わせてカラーやサイズを調整しやすい
- リズミカルな動きで視覚的に動きのある演出が可能
「波打つラインローディング」は、縦線の伸縮で波打つ動きを演出する軽量かつ視覚的に楽しいローディングアニメーションで、ユーザーの待機時間をストレスなく演出できる効果的なデザインです。
回転しながら横から出現
See the Pen 回転しながら横から出現 by et (@eito-oda) on CodePen.
「回転しながら横から出現」は、要素が横方向からスライドしつつ回転して現れるアニメーションです。
スクロールに合わせて動くことで、視覚的なアクセントを加えながらコンテンツを自然に表示できます。
特徴
- 横方向（X軸）からスライドして出現
- 回転（360°）と縮小→通常サイズのスケールで立体感を演出
- スクロールに同期したトリガーで発動
- 単純な要素でも動きに変化を付けられる
活用シーン
- セクションの見出しやコンテンツを強調して表示
- スクロール連動のインタラクティブ演出
- ポートフォリオやサービス紹介ページでの注目箇所
メリット
- 回転とスライドを組み合わせることで目を引く演出が可能
- スクロールトリガーでタイミングを制御でき、自然な導入が可能
- CSSやGSAPだけで実装でき、軽量で簡単
「回転しながら横から出現」は、スクロールに合わせて横からスライドしつつ回転するアニメーションで、視覚的に動きのあるコンテンツ演出が簡単に実現できる手法です。
スクロールで会社沿革のタイムラインがスライド表示
See the Pen スクロールで会社沿革のタイムラインがスライド表示 by et (@eito-oda) on CodePen.
「スクロールで会社沿革のタイムラインがスライド表示」は、ユーザーがスクロールするタイミングに合わせて沿革情報が順番に横方向から滑らかに表示されるアニメーションです。
視覚的に沿革の流れを把握しやすくし、ページ全体の動きにアクセントを加えます。
特徴
- 各タイムライン項目が横方向から滑らかにスライドして出現
- スクロールに連動して順番に表示される
- シンプルなリストでも動きがある演出に
- GSAPのScrollTriggerを利用した自然なアニメーション
活用シーン
- 会社沿革や実績紹介ページ
- サービスや製品の歴史を時系列で見せるセクション
- ポートフォリオでのプロジェクト履歴紹介
メリット
- スクロールに合わせて表示されるため視線誘導が自然
- 単純なテキストでも動きを付けて印象的に見せられる
- スマホ・PCどちらでもスムーズに実装可能
「スクロールで会社沿革のタイムラインがスライド表示」は、スクロール連動で沿革情報を順番に横から滑らかに出現させることで、閲覧者に時系列の流れをわかりやすく、印象的に伝える演出手法です。
一瞬ノイズ→正常表示
See the Pen 一瞬ノイズ→正常表示 by et (@eito-oda) on CodePen.
「一瞬ノイズ→正常表示」は、文字や要素が最初に微妙にノイズや揺れを伴って現れ、その後通常の状態に戻るアニメーションです。
スクロールに連動させることで、目を引く演出を加えつつ自然に表示されます。
特徴
- 一瞬だけ文字や要素が横に揺れたり透明度が変化する
- ノイズのような動きから通常表示に移行
- ScrollTriggerでスクロール連動のタイミングを設定可能
- 視覚的インパクトを簡単に追加できる
活用シーン
- 見出しやタイトルの登場時の演出
- 重要なメッセージやキャッチコピーの強調
- サイトやアプリのトップページで目を引く演出
メリット
- 単純なフェードインより目立つ演出が可能
- 小規模アニメーションでページパフォーマンスに影響が少ない
- スクロール連動で自然な表示タイミングを作れる
「一瞬ノイズ→正常表示」は、文字や要素に短時間の揺れやノイズ演出を加えることで、ユーザーの目を引きつつ自然にコンテンツを表示させるテクニックです。
左下から縮小→拡大
See the Pen 左下から縮小→拡大 by et (@eito-oda) on CodePen.
「左下から縮小→拡大」は、要素が画面左下から現れ、縮小状態から徐々に拡大しながら元のサイズに戻るアニメーションです。
スクロール連動で自然なタイミングに表示でき、動きに立体感を出す演出が可能です。
特徴
- 左下から画面内に出現
- 初期は縮小・回転状態でスタート
- 徐々に拡大して自然に元のサイズへ戻る
- ScrollTriggerでスクロールに合わせた演出が可能
活用シーン
- 見出しやカードの登場演出
- コンテンツを順に表示させる際のアクセント
- サイトやアプリでユーザーの目を引きたい部分
メリット
- 立体感のある自然な動きで注目を集められる
- スクロール連動でユーザー体験を向上
- 小規模アニメーションでパフォーマンスへの影響が少ない
「左下から縮小→拡大」は、スクロール時に要素を左下から登場させ、縮小状態から拡大する動きで自然に注目を集められる演出テクニックです。
まとめ
アニメーションは、派手さよりも 「適切な場面で、適切な動きを使うこと」が大切です。
ほんの少し動きを加えるだけでも、サイトの印象・読みやすさ・使いやすさは大きく変わります。
今回紹介したアニメーションはどれも 軽量・シンプル・汎用性が高い ものばかりです。
動きのあるレイアウトを少し加えるだけでも、サイト全体の雰囲気がぐっと明るくなることがあります。
ぜひ、制作されているプロジェクトの中で、合いそうな場面があれば取り入れてみてください。
