WebサイトやLPを「良く見せたい」「ユーザーの視線を引きつけたい」
──そんな時に役立つのが CSS/JSアニメーション です。
今回は、コピペでそのまま使える 「CSS/JSアニメーション集10選」をまとめました。
デザインを邪魔せず、どのジャンルのサイトにも取り入れやすい動きを中心に掲載しているため、
ポートフォリオ・企業サイト・EC・サービス紹介ページなど、幅広い場面で活用できます。
制作にすぐ導入できる内容となっていますので、ぜひ気になるものから試してみてください。
複数の要素を時間差で奥からズームイン
See the Pen 複数の要素を時間差で奥からズームイン by et (@eito-oda) on CodePen.
「複数の要素を時間差で奥からズームイン」は、複数のテキストや画像を奥から徐々に手前にズームさせながら、順番に表示するアニメーションです。
要素ごとに少しずつ遅延を付けて出現させることで、立体感やリズム感を演出でき、視覚的に動きのあるページ作りが可能です。スクロール連動で発動させることで、ユーザーがページを読み進めるタイミングで自然に表示されます。
特徴
・複数の要素を順番に奥から手前にズームして表示
・staggerを使った時間差でリズミカルに見える
・柔らかい動きでページに立体感を演出
・テキスト・画像・カード型要素など、幅広いコンテンツに対応
活用シーン
・サービス紹介や特徴リストの順番表示
・ポートフォリオや作品ギャラリーの演出
・記事やコンテンツの段落ごとの自然な表示
・スクロールに連動した動きで注目度を高めたい箇所
メリット
・単調なページでも立体感・奥行きを与えられる
・ユーザーの視線誘導に自然なリズムを作れる
・個別の要素を目立たせつつ、ページ全体に統一感を保持
・比較的シンプルなコードで実装でき、軽量で負荷が少ない
「複数の要素を時間差で奥からズームイン」は、順番に出現する動きでコンテンツを立体的に魅せる手法です。
ページにリズムと奥行きを加えたい場面で効果的で、ユーザー体験を向上させるアニメーションとして幅広く活用できます。
ゴム弾力で回転しながらポップ
See the Pen ゴム弾力で回転しながらポップ by et (@eito-oda) on CodePen.
「ゴム弾力で回転しながらポップ」は、要素が回転しつつ弾むようにスムーズに拡大して表示されるアニメーションです。
弾む動き（elastic）を使うことで、ゴムのような弾力感を表現し、単調なポップアップでも視覚的に楽しい印象を与えられます。スクロール連動で発動させることで、ユーザーがページを読み進めるタイミングで自然に表示されます。
特徴
・要素が回転しながら拡大するポップアップ演出
・弾むような動きで柔らかい印象を与える
・scrollTriggerでスクロールに連動可能
・テキスト・画像・ボタンなど様々な要素に適用可能
活用シーン
・ボタンやCTAを目立たせたい時
・サービスや特徴紹介の強調部分
・ポートフォリオや作品ギャラリーのアニメーション
・スクロール連動でユーザーを引き付ける演出
メリット
・ユーザーの視線を自然に誘導できる
・単調なページに動きと楽しさを追加できる
・弾む動きで印象に残りやすく、目立たせやすい
・GSAPを使えば短いコードで実装可能
「ゴム弾力で回転しながらポップ」は、回転と弾む動きで要素を印象的に見せるアニメーションです。
スクロールに連動させることで自然に表示され、視覚的な楽しさと注目度を同時に高められる手法として活用できます。
マスクスライド(左→右)
See the Pen マスクスライド(左→右) by et (@eito-oda) on CodePen.
「マスクスライド(左→右)」は、文字や要素の上に覆いかぶさったマスクが左から右にスライドすることで、コンテンツを順番に表示するアニメーションです。
マスクを使った手法により、シンプルながら視覚的に目を引く演出が可能で、スクロール連動で表示タイミングを制御できます。
特徴
・文字や要素をマスクで隠し、スライドで露出
・左から右へ自然にスライドして表示される動き
・スクロール連動でタイミング調整可能
・色やスピードを変更してカスタマイズ可能
活用シーン
・見出しやタイトルの登場演出
・セクション切り替え時のアクセント
・キャンペーンや注目コンテンツの強調
・商品名やサービス名を印象的に見せたい場合
メリット
・視線を自然に誘導できる
・シンプルながら印象的なアニメーションが可能
・スクロールに連動することでユーザー体験が向上
・文字だけでなく画像や他の要素にも応用可能
マスクスライド(左→右)は、マスクを使ったシンプルかつ印象的なアニメーションです。
スクロールに連動させることで、見出しやコンテンツを自然に強調でき、ユーザーの注目を引きやすくなります。
影だけ強調
See the Pen 影だけ強調 by et (@eito-oda) on CodePen.
「影だけ強調」は、要素自体のサイズや色は変えずに、スクロールに応じて影の強さを変化させるアニメーションです。
要素を浮かび上がらせるような視覚効果を演出でき、シンプルながら目立たせたい箇所に効果的です。
特徴
・要素本体は変化せず、影だけを強調
・スクロールに連動して自然に影が深くなる
・浮遊感や立体感を簡単に演出
・軽量でシンプルなCSS・GSAPアニメーション
活用シーン
・カード型コンテンツやボックスの強調
・CTAボタンや見出しの注目演出
・セクション内で重要な情報を目立たせたい場合
・ブログやポートフォリオのUIアクセント
メリット
・要素自体を変形せずに注目度アップ
・視覚的に柔らかいアクセントを付与
・スクロール連動で自然な演出が可能
・簡単に他の要素にも応用できる
影だけ強調は、要素を変形させずに立体感や注目度を上げるシンプルな演出です。
スクロールに合わせて影を強めることで、ユーザーの視線を自然に誘導できます。
通知バッジ振動
See the Pen 通知バッジ振動 by et (@eito-oda) on CodePen.
「通知バッジ振動」は、通知やアラート要素に動きを加えて、ユーザーの注意を引くアニメーションです。
軽い左右の振動やブルブル動きを付けることで、画面上で目立たせることができます。
特徴
・通知バッジが左右や上下に振動する動き
・短時間で繰り返すことで注意喚起効果
・CSSやGSAPで簡単に実装可能
・アニメーションは軽量で視覚的に強すぎない
活用シーン
・チャットやSNSの新着通知
・ECサイトのカートやポイント表示
・アプリ内のアラートや重要メッセージ
・ユーザーの目を誘導したいボタンやアイコン
メリット
・ユーザーに自然に注目させられる
・動きで重要性を伝えられる
・他の演出と組み合わせやすい
・操作感やUIの楽しさを向上
通知バッジ振動は、ユーザーの視線を集めたい要素に効果的なアニメーションです。
短く軽快な振動で、画面上で自然に目立たせることができます。
Vanta.js：網
See the Pen vanta.js：銅 by et (@eito-oda) on CodePen.
「Vanta.js：網」は、背景にリアルタイムで動く網状のアニメーションを表示できるライブラリです。
3D風の線や網目が動くことで、サイトに動きと奥行きを加え、スタイリッシュな印象を演出できます。
特徴
- 線や網目がリアルタイムで動く3Dアニメーション
- マウス操作やタッチ操作に反応可能
- 軽量で軽快に動作
- 背景としての演出に最適
活用シーン
- ポートフォリオサイトや企業サイトの背景演出
- 技術系サイトやWebサービス紹介ページ
- ヒーローセクションやランディングページのインパクト演出
- モダンで動きのあるデザインを取り入れたい場合
メリット
- ページに奥行きと動きを追加できる
- ユーザーの視覚的興味を引く
- 既存のデザインに簡単に組み込み可能
- 動的な背景でサイト全体の印象をアップ
Vanta.jsの「網」は、サイト背景にスタイリッシュで動的な網状アニメーションを簡単に導入できる演出です。
視覚的に印象的なデザインを求めるサイトに最適です。
hoverで影を付与
See the Pen hoverで影を付与 by et (@eito-oda) on CodePen.
「hoverで影を付与」は、ユーザーが見出しやテキストにマウスオーバーした際に、影をつけて立体的な表現を加える演出です。
シンプルながらもインタラクティブなアクセントを付けることができ、視覚的に目を引く効果があります。
特徴
- マウスオーバーでテキストに影を付与
- CSSの
filter: drop-shadowで簡単に実装可能 - 軽量でパフォーマンスに影響しにくい
- 自然な立体感を演出できる
活用シーン
- 見出しやボタンにアクセントを加えたいとき
- ポートフォリオサイトやブログの記事見出し
- CTA（Call To Action）リンクの強調
- シンプルで洗練されたインタラクションを加えたい場合
メリット
- ユーザーの視線を自然に誘導できる
- ページのデザインに動きを取り入れられる
- JavaScript不要でCSSだけで実装可能
- 小さな演出でサイトの印象をアップ
簡単に実装できるインタラクティブな演出で、見出しやテキストに奥行き感を与え、ユーザー体験を向上させる効果的な手法です。
横に流れるバーローディング
See the Pen 横に流れるバー by et (@eito-oda) on CodePen.
「横に流れるバーローディング」は、バーが横方向に動き続けることで、読み込み中や処理中の状態を視覚的に示すアニメーションです。
シンプルでわかりやすく、ユーザーに進行状況を感覚的に伝えることができます。
特徴
- バーが横に連続して流れるアニメーション
- CSSの
@keyframesで簡単に実装可能 - 軽量で高速、パフォーマンスに影響しにくい
- シンプルながら視覚的に進行状況を表現
活用シーン
- ページやコンテンツの読み込み時
- データ通信や処理待ちの状態を示すUI
- ポートフォリオやサービスサイトのローディング演出
- シンプルでクリーンなUIデザインに適した演出
メリット
- ユーザーに現在処理中であることを直感的に伝えられる
- 実装が簡単でCSSだけで完結
- 視覚的なアクセントを加えられる
- 軽量でどのデバイスでもスムーズに動作
「横に流れるバーローディング」は、CSSだけで作れるシンプルな進行状況アニメーションで、ユーザーに処理中であることを直感的に示し、ページ体験を向上させる効果的な手法です。
左境界ラインの幅伸長スクロールアニメーション
See the Pen 左境界ラインの幅伸長スクロールアニメーション by et (@eito-oda) on CodePen.
「左境界ラインの幅伸長スクロールアニメーション」は、スクロールに連動して要素の左側の境界線が徐々に伸びる演出です。
シンプルながら視覚的なアクセントを加え、スクロールに合わせた動きで注目を集めることができます。
特徴
- 要素の左側にラインが表示され、スクロールに応じて幅が伸びる
- CSSとGSAPのScrollTriggerで簡単に実装可能
- シンプルで上品なデザイン演出
- ユーザーのスクロールに応じた動きで自然な注目効果
活用シーン
- サービス紹介やコンテンツ見出しの強調
- セクションタイトルの視覚的アクセント
- ページスクロール時の動的演出
- ポートフォリオサイトやコーポレートサイトでの使用
メリット
- シンプルながら視覚的なインパクトがある
- スクロールに連動するため、自然な動きで注目を引ける
- 実装が軽量でパフォーマンスに影響しにくい
- デザインの統一感を損なわずにアクセントを追加できる
「左境界ラインの幅伸長スクロールアニメーション」は、スクロール連動で要素を強調するシンプルで上品な演出方法です。
ページの動きに合わせて自然に注目を集められるため、見出しや重要コンテンツに最適です。
横ラインが伸びて現れる見出し
See the Pen 横ラインが伸びて現れる見出し by et (@eito-oda) on CodePen.
「横ラインが伸びて現れる見出し」は、タイトルの横に配置したラインがスクロールに連動して伸びるアニメーションです。
ラインの伸長と共に見出しが強調され、シンプルながら視覚的に印象的な演出が可能です。
特徴
- 見出しの横に配置したラインがスクロールに合わせて横に伸びる
- CSSとGSAPのScrollTriggerで簡単に実装可能
- シンプルで上品なデザイン演出
- ユーザーのスクロールに応じた動きで注目度をアップ
活用シーン
- セクション見出しやコンテンツタイトルの強調
- ポートフォリオサイトやコーポレートサイトの見出し演出
- ページのスクロールに合わせて自然に注目させたい場面
- ニュースやブログ記事のタイトルアクセント
メリット
- シンプルながら視覚的なインパクトがある
- スクロール連動で自然な動きが実現できる
- 軽量でパフォーマンスに影響しにくい
- デザインの統一感を損なわずアクセントを追加できる
「横ラインが伸びて現れる見出し」は、スクロールに連動したシンプルで洗練されたアニメーション演出です。
見出しを自然に強調し、ページ全体のデザインに統一感を保ちながら注目度を高めることができます。
まとめ
アニメーションは、派手さよりも 「適切な場面で、適切な動きを使うこと」が大切です。
ほんの少し動きを加えるだけでも、サイトの印象・読みやすさ・使いやすさは大きく変わります。
今回紹介したアニメーションはどれも 軽量・シンプル・汎用性が高い ものばかりです。
動きのあるレイアウトを少し加えるだけでも、サイト全体の雰囲気がぐっと明るくなることがあります。
ぜひ、制作されているプロジェクトの中で、合いそうな場面があれば取り入れてみてください。
