WebサイトやLPを「良く見せたい」「ユーザーの視線を引きつけたい」
──そんな時に役立つのが CSS/JSアニメーション です。
今回は、コピペでそのまま使える 「CSS/JSアニメーション集10選」をまとめました。
デザインを邪魔せず、どのジャンルのサイトにも取り入れやすい動きを中心に掲載しているため、
ポートフォリオ・企業サイト・EC・サービス紹介ページなど、幅広い場面で活用できます。
制作にすぐ導入できる内容となっていますので、ぜひ気になるものから試してみてください。
縮小状態から振動を伴って出現
See the Pen 縮小状態から振動を伴って出現 by et (@eito-oda) on CodePen.
「縮小状態から振動を伴って出現」は、見出しが最初に縮小された状態から徐々に元の大きさに戻りつつ、軽く振動しながら表示されるアニメーションです。
動きに弾力感があるため、ユーザーの目を引きつける効果があります。
特徴
- 初期状態は縮小されたサイズで非表示
- 表示時に振動（弾むような動き）を伴ってスムーズに出現
- GSAPの
elasticイージングで自然な弾力アニメーションを実現 - 単純な文字でも動きで注目度を高められる
活用シーン
- ページのセクション見出しの表示演出
- 重要なメッセージやキャッチコピーの強調
- ポートフォリオサイトやLPでユーザーの視線を誘導したい場合
- スクロール連動で動きを加えたい箇所
メリット
- ユーザーの視線を自然に誘導できる
- 弾むような動きで楽しさや印象を演出
- 実装が簡単で、既存のデザインを壊さずアクセント追加可能
- スクロール連動なので動きが唐突にならず自然
「縮小状態から振動を伴って出現」は、弾力のある動きで見出しを印象的に表示できる演出です。
シンプルながら目を引くため、重要なタイトルやキャッチコピーに最適なアニメーションです。
上に弾んで着地するポップ
See the Pen 上に弾んで着地するポップ by et (@eito-oda) on CodePen.
「上に弾んで着地するポップ」は、見出しや要素が下から飛び上がるように登場し、着地時に弾むような動きで表示されるアニメーションです。
弾む動きで自然なポップ感を演出でき、ユーザーの注目を集めやすい表現です。
特徴
- 初期状態は下にずれた縮小状態
- 上方向に飛び上がり、着地時に弾む動きで表示
- GSAPの
bounce.outイージングでリアルな弾みを表現 - アニメーション時間は約1秒前後でスムーズ
活用シーン
- ページセクションの見出しや重要要素の表示
- LPやポートフォリオサイトで動きをつけたい見出し
- 商品紹介やキャンペーン情報の強調
- スクロール連動で目立たせたい箇所
メリット
- ユーザーの目線を自然に誘導できる
- 弾む動きで楽しさや躍動感を演出
- 実装が簡単で、デザインにアクセントを加えやすい
- スクロール時に表示されるので唐突さがなく自然
「上に弾んで着地するポップ」は、弾力のある動きで見出しや要素を印象的に表示できる演出です。
シンプルながら視覚的インパクトがあり、注目させたいコンテンツに最適です。
ボタンが四角形→丸に
See the Pen ボタンが四角形→丸に by et (@eito-oda) on CodePen.
「ボタンが四角形→丸に」は、スクロールに応じてボタンの角が丸く変化するアニメーションです。
ユーザーの視線を誘導しつつ、柔らかい印象を与えるインタラクション表現として活用できます。
特徴
- 初期状態は角がやや丸い四角形
- スクロールに合わせて角が徐々に丸く変化
- GSAPの
scrollTriggerでスクロール連動 - アニメーションは滑らかで自然
活用シーン
- CTA（Call To Action）ボタンの強調
- LPやサービス紹介ページでの視線誘導
- インタラクティブなボタン演出を追加したい場合
- スクロール時の動きでページに動的な印象を与えたい箇所
メリット
- ボタンに柔らかさと遊び心を加えられる
- ユーザーの注目を自然に集めやすい
- 実装が簡単でデザインを大きく崩さない
- スクロール連動でインタラクティブ感を演出
「ボタンが四角形→丸に」は、スクロールに連動した角丸変化でボタンを目立たせる表現です。
柔らかさと動きのあるデザインで、CTAなど重要なボタンの視認性を高めることができます。
チェックマーク点滅
See the Pen チェックマーク点滅 by et (@eito-oda) on CodePen.
「チェックマーク点滅」は、Webページ上でチェックマークがリズミカルに点滅するアニメーションです。
視覚的に注目を集めたい箇所に使えるシンプルで効果的な演出です。
特徴
- チェックマークが点滅することで視線を誘導
- シンプルで軽量なアニメーション
- GSAPを使ってスムーズに制御可能
- 色やサイズのカスタマイズが容易
活用シーン
- 成功メッセージや完了通知の演出
- フォーム送信後の確認表示
- サービスの特徴やポイントを強調したいセクション
- CTAやボタンの近くで注目させたい箇所
メリット
- ユーザーの注意を自然に引きやすい
- コードが軽量でページ負荷が低い
- デザインに合わせて色や点滅速度を調整可能
- 成功や完了のフィードバックをわかりやすく伝えられる
チェックマーク点滅は、完了や成功を伝えるための視覚的フィードバックとして最適です。
シンプルながらインパクトがあり、ユーザー体験の向上に役立ちます。
Vanta.js：位相幾何学
See the Pen vanta.js：位相幾何学 by et (@eito-oda) on CodePen.
「Vanta.js：位相幾何学」は、Webページ上に動的で美しい幾何学模様を生成するライブラリです。
スクロールやマウス操作に反応する3Dライクなアニメーションで、背景や見出し周りにインタラクティブな演出を加えられます。
特徴
- Vanta.jsによるリアルタイム3Dアニメーション
- 位相幾何学的な網目やパターンが動的に変化
- マウスやタッチ操作に連動可能
- 高度なグラフィック表現ながら軽量で読み込み高速
活用シーン
- ページ背景の装飾やインタラクティブな演出
- サービスや製品の特徴を際立たせたいランディングページ
- デザイン系ブログやポートフォリオサイトのビジュアル強化
- モダンで先進的な印象を与えたいセクション
メリット
- 視覚的インパクトが高く、ユーザーの興味を引きやすい
- マウス操作でインタラクションを体験できる
- 簡単なコードで実装可能
- ページ全体のデザインクオリティを底上げできる
「Vanta.js：位相幾何学」は、動的な幾何学模様でWebページを鮮やかに演出する手軽な方法です。
視覚的インパクトとインタラクティブ性を両立させ、デザインの先進性をアピールできます。
hoverで3D影を付与
See the Pen hoverで3D影を付与 by et (@eito-oda) on CodePen.
「hoverで3D影を付与」は、マウスオーバー時に文字や要素に立体的な影を追加するアニメーションです。
シンプルながら視覚的な奥行きを演出し、ユーザーの注目を集めることができます。
特徴
- マウスオーバーで要素に3D風の影が表示される
- CSSの
filter: drop-shadow()を使用して軽量で高速 - transitionで滑らかに影が出現
- 色や影の距離、ぼかし量を自由に調整可能
活用シーン
- ナビゲーションやボタンのホバー演出
- 見出しや重要テキストの強調
- 画像やカードの立体感演出
- ユーザーインターフェイスのインタラクション強化
メリット
- シンプルなコードで視覚的インパクトを追加
- ページ負荷が少なくパフォーマンスに優れる
- ユーザーの注目を自然に誘導できる
- デザインに合わせて影の色や距離をカスタマイズ可能
hoverで3D影を付与することで、要素が浮き上がるような立体感を演出できます。
軽量で扱いやすく、アクセントとして幅広く使える効果的な演出です。
渦巻きドットローディング
See the Pen 渦巻きドット by et (@eito-oda) on CodePen.
「渦巻きドットローディング」は、複数の小さなドットが渦を描くように回転するアニメーションで、ページやコンテンツの読み込み中にユーザーへ視覚的なフィードバックを提供します。
シンプルながら動きがあるため、待機中でも飽きさせない演出が可能です。
特徴
- 小さなドットが渦巻き状に回転するデザイン
- 各ドットの回転に時間差をつけることで立体感と動きのリズムを表現
- CSSアニメーションのみで実装可能、軽量で高速
- カラーやサイズ、回転速度を自由に調整可能
活用シーン
- ページやコンテンツのロード待機画面
- データ取得中のインジケーターとして使用
- モバイルアプリやウェブアプリのローディング演出
- ユーザーの注意を一時的に引き付けたい場合
メリット
- シンプルかつ視覚的にわかりやすい待機演出
- 軽量でページ負荷が少ない
- 複数ドットの動きで単調にならず、飽きにくい
- デザインに合わせて柔軟にカスタマイズ可能
渦巻きドットローディングは、軽量で見栄えの良いロードアニメーションです。
読み込み中の待機状態をスタイリッシュに演出でき、ユーザー体験を向上させる効果的な演出です。
セクション背景色が徐々に変化する
See the Pen セクション背景色が徐々に変化する by et (@eito-oda) on CodePen.
「セクション背景色が徐々に変化する」は、スクロールに連動してセクションの背景色が滑らかに変化するアニメーションです。
視覚的に変化をつけることで、ページのメリハリを強調し、ユーザーの注目を自然に誘導します。
特徴
- スクロールに応じて背景色が滑らかに変化
- CSSとGSAPのScrollTriggerで簡単に実装可能
- カラーの組み合わせ次第で印象を大きく変えられる
- アニメーションはスクロールと同期して動くため、自然な演出
活用シーン
- コンテンツごとのセクション区切りの演出
- ページのスクロール体験を強化したい場合
- キャンペーンや特集ページで視覚的に注目させたい箇所
- 背景色の変化で雰囲気を演出したい場面
メリット
- ページに動きが加わり単調さを解消
- 色の変化で視線誘導や情報の区切りを自然に演出
- コードがシンプルで軽量、パフォーマンスに優しい
- デザインの統一感や印象を容易にカスタマイズ可能
スクロール連動の背景色変化は、ユーザーの目線を自然に誘導しつつ、ページに動きとリズムを与える演出です。
軽量かつ視覚的にわかりやすく、セクションごとのメリハリ作りに最適です。
横柱が「0% → 100%」で伸びるスキルバー
See the Pen 横柱が「0% → 100%」で伸びるスキルバー by et (@eito-oda) on CodePen.
「横柱が『0% → 100%』で伸びるスキルバー」は、スクロールに連動して横方向のバーが徐々に伸びるアニメーションです。
スキルや進捗度を視覚的に表現することで、ユーザーにわかりやすく情報を伝えられます。
特徴
- 横方向のバーが0%から100%まで滑らかに伸びる
- スクロールと連動して動作するため自然な演出
- カラーやバーの長さを自由にカスタマイズ可能
- 実装がシンプルで軽量
活用シーン
- ポートフォリオサイトのスキル表現
- プロジェクトの進捗表示やステータスバー
- データや統計の視覚的なアピール
- ゲームやアプリのレベル表示など
メリット
- 数値だけでは伝わりにくいスキルや進捗を直感的に表現
- スクロールと連動させることで動きがあり、視覚的に飽きさせない
- デザインにメリハリをつけやすく、ページ全体の印象を向上
- コードが簡単で他の要素とも組み合わせやすい
スクロール連動のスキルバーは、進捗やスキルの可視化に最適で、ページに動きを加えつつ情報を直感的に伝えられる演出です。
色や長さをカスタマイズすることで、デザイン性と機能性を両立できます。
カードの縁が光る
See the Pen カードの縁が光る by et (@eito-oda) on CodePen.
「カードの縁が光る」は、スクロールに連動してカードの周囲に光のエフェクトが現れるアニメーションです。
ユーザーの視線を誘導し、注目度を高める演出として活用できます。
特徴
- カードの縁に光が広がるアニメーション
- スクロールと連動して自然に発動
- 光の強さや色を自由にカスタマイズ可能
- 実装がシンプルでパフォーマンスに優れる
活用シーン
- サービス紹介や商品カードの強調
- ポートフォリオや作品集の注目箇所演出
- CTAボタンやリンクカードのアクセント
- イベントやキャンペーン情報のハイライト
メリット
- ユーザーの目線を自然に誘導できる
- ページに動きとアクセントを加えられる
- 光の色や強さを変えるだけで印象を簡単に調整可能
- 他のアニメーションと組み合わせやすい
スクロール連動の光るカード演出は、注目させたい要素を直感的に強調でき、ページ全体の動きとデザイン性を向上させることができます。
光の強さや色をカスタマイズすれば、さまざまなデザインに応用可能です。
まとめ
アニメーションは、派手さよりも 「適切な場面で、適切な動きを使うこと」が大切です。
ほんの少し動きを加えるだけでも、サイトの印象・読みやすさ・使いやすさは大きく変わります。
今回紹介したアニメーションはどれも 軽量・シンプル・汎用性が高い ものばかりです。
動きのあるレイアウトを少し加えるだけでも、サイト全体の雰囲気がぐっと明るくなることがあります。
ぜひ、制作されているプロジェクトの中で、合いそうな場面があれば取り入れてみてください。
