WebサイトやLPを「良く見せたい」「ユーザーの視線を引きつけたい」
──そんな時に役立つのが CSS/JSアニメーション です。
今回は、コピペでそのまま使える 「CSS/JSアニメーション集10選」をまとめました。
デザインを邪魔せず、どのジャンルのサイトにも取り入れやすい動きを中心に掲載しているため、
ポートフォリオ・企業サイト・EC・サービス紹介ページなど、幅広い場面で活用できます。
制作にすぐ導入できる内容となっていますので、ぜひ気になるものから試してみてください。
光が当たるように中央から広がるフェードイン
See the Pen 光が当たるように中央から広がるフェードイン by et (@eito-oda) on CodePen.
「光が当たるように中央から広がるフェードイン」は、テキストや要素が中央から徐々に現れる演出です。
円形のマスクと透明度の変化を組み合わせ、まるで光が当たるように自然に表示されます。
特徴
- 中央から円形に広がるマスクでフェードイン
- スクロールに連動して発動する自然な動き
- clip-pathを活用した軽量で滑らかなアニメーション
- 光が当たるような視覚効果で注目度アップ
活用シーン
- ページ冒頭のタイトルやキャッチコピーの強調
- ポートフォリオやサービス紹介の見出し演出
- CTAや重要メッセージの自然な表示
- スクロールで動きを加えたいセクション全般
メリット
- ユーザーの視線を中央に誘導できる
- デザインに洗練された印象をプラス
- 他のスクロールアニメーションと組み合わせやすい
- 実装が軽量でパフォーマンスに優れる
中央から広がるフェードインは、自然な光の演出でユーザーの注目を集めることができ、タイトルや重要コンテンツの表示をスタイリッシュに演出するのに最適です。
回転しながら ZOOM（Z方向奥から）
See the Pen 回転しながら ZOOM（Z方向奥から） by et (@eito-oda) on CodePen.
「回転しながら ZOOM（Z方向奥から）」は、要素が奥から手前にズームインしつつ、X軸・Y軸方向に回転しながら現れるアニメーションです。
立体的でダイナミックな動きにより、注目度の高い演出を簡単に実装できます。
特徴
- 要素が奥から手前にズームインして現れる
- X軸・Y軸の回転を組み合わせた3D感のある動き
- スクロール連動で自然に表示される
- GSAPの
fromアニメーションを使用し軽量でスムーズ
活用シーン
- サービス紹介やポートフォリオでのインパクト演出
- ページ内の注目コンテンツやCTAの表示
- スクロールに合わせた立体的なアニメーション演出
- バナーやヒーローセクションの目立たせたい要素
メリット
- ユーザーの視線を自然に誘導できる
- 立体的な動きでデザインに高級感や動的印象をプラス
- 他のスクロールアニメーションと組み合わせやすい
- 実装が簡単でパフォーマンスへの影響が少ない
回転とズームを組み合わせた3Dアニメーションは、奥行き感を持たせつつコンテンツを目立たせるのに最適で、ページ全体の動きにリズムを与えることができます。
セクションが下から浮き上がる
See the Pen セクションが下から浮き上がる by et (@eito-oda) on CodePen.
「セクションが下から浮き上がる」は、ページスクロールに連動してセクションが下からゆっくり浮き上がるアニメーションです。
自然な動きでコンテンツを視覚的に際立たせ、スクロール体験をリッチに演出できます。
特徴
- セクションが下から上へ浮き上がる動き
- 透明度と位置を組み合わせた滑らかなフェードイン効果
- スクロールトリガーでタイミングをコントロール
- GSAPとScrollTriggerを使った軽量なアニメーション
活用シーン
- ページ内の各セクションの導入演出
- サービスや商品の紹介セクションの注目度アップ
- 長いページでスクロールにリズムを与える演出
- ポートフォリオサイトやランディングページでの使用
メリット
- コンテンツの視認性を高められる
- ページ全体の動きに統一感を出せる
- ユーザーの目線を自然に誘導できる
- 実装が簡単でパフォーマンスへの影響が少ない
下から浮き上がるアニメーションは、スクロール時にコンテンツを目立たせつつ、ページ全体に動きを与える効果的な手法です。
光の点滅ワープ
See the Pen 光の点滅ワープ by et (@eito-oda) on CodePen.
「光の点滅ワープ」は、丸い光の要素がリズミカルに点滅するアニメーションです。
シンプルながらも視覚的に目を引く効果があり、ページのアクセントや注意喚起に最適です。
特徴
- 丸い光が一定間隔で点滅する
- 繰り返し（ループ）アニメーションで永続的に発光
- GSAPを使用した滑らかなフェードイン・フェードアウト
- 軽量でページ負荷が少ない
活用シーン
- 注目させたいボタンやアイコンのアクセント
- ヒーローセクションの装飾や演出
- ランディングページやキャンペーンページでの視線誘導
- 目立たせたい通知や重要情報の強調
メリット
- 視覚的に目を引きやすい
- 実装が簡単で軽量
- ページの雰囲気を華やかに演出できる
- 繰り返しアニメーションで自然な動きを表現可能
「光の点滅ワープ」は、単純ながら効果的に注目を集めるアニメーションで、ページにアクセントや視線誘導を加えたい場合に最適な演出手法です。
Vanta.js：ドット
See the Pen vanta.js：ドット by et (@eito-oda) on CodePen.
「Vanta.js：ドット」は、背景にドット状のアニメーションが動く視覚効果を作るライブラリです。
マウス操作やタッチ操作に反応するインタラクティブな演出が可能で、動きのある背景としてウェブサイトをスタイリッシュに彩ります。
特徴
- ドットが動き、網目状のパターンや連結線を形成
- マウスやタッチに反応するインタラクティブ演出
- 軽量かつ高速でスムーズなアニメーション
- Vanta.jsのライブラリを使用し、数行のコードで実装可能
活用シーン
- ヒーローセクションの背景演出
- テック系やクリエイティブ系サイトのデザインアクセント
- ランディングページでの動的背景
- 注意を引きたいセクションやモジュールの装飾
メリット
- ページ全体を動的に演出できる
- 視覚的に印象的でユーザーの関心を引きやすい
- 実装が簡単でカスタマイズ性も高い
- レスポンシブ対応でスマホ・タブレットでも動作可能
ウェブサイトに動きのあるインタラクティブ背景を簡単に追加できる手法で、特にスタイリッシュでテック感のあるデザインに最適です。
ハート跳ねローディング
See the Pen ハート跳ね by et (@eito-oda) on CodePen.
「ハート跳ねローディング」は、ハートマークがリズミカルに跳ねるアニメーションで、読み込み中の画面に可愛らしい演出を加える手法です。
小さなハートが順番に弾むことで、単調になりがちなローディング画面を華やかに演出できます。
特徴
- ハートが拡大・回転しながら跳ねるアニメーション
- 複数のハートが時間差で順番に跳ねる動き
- CSSのみで軽量に実装可能
- 動きがループするため読み込み中も視覚的に楽しめる
活用シーン
- ページやアプリの読み込み画面
- ランディングページでの目立たせたいセクション
- バレンタインや恋愛系コンテンツの演出
- 可愛らしいアクセントを加えたいUIパーツ
メリット
- ユーザーの視線を集めやすい
- ページ滞在時間や印象を向上させやすい
- コードが簡単で軽量、動作もスムーズ
- デザインに遊び心を加えられる
「ハート跳ねローディング」は、可愛らしいアニメーションで読み込み画面を華やかに演出でき、特に恋愛・イベント系サイトや可愛いデザインを強調したい場面に最適です。
左右から時間差で寄ってくる
See the Pen 左右から時間差で寄ってくる by et (@eito-oda) on CodePen.
「左右から時間差で寄ってくる」は、複数の要素が左右から交互に現れ、順番に中央に集まるアニメーションです。
スクロールに応じて動くため、ユーザーがページを読み進める際に自然な導線を作りつつ、視覚的なアクセントを加えられます。
特徴
- 奇数要素は左から、偶数要素は右から寄ってくる動き
- 時間差（stagger）で順番に出現
- GSAPとScrollTriggerを使用したスムーズなアニメーション
- フェードインとスライドが同時に発生
活用シーン
- サービス紹介や特徴リストの表示
- FAQやステップ解説など複数の要素を順に見せたい箇所
- 商品や作品ギャラリーの演出
- スクロール連動型の動的見出し
メリット
- 視線誘導がしやすく、コンテンツの理解を助ける
- ページに動きを加えて、飽きさせないデザインにできる
- 実装が比較的簡単で、既存の要素にも応用可能
- モバイルでも自然なアニメーションで表示可能
「左右から時間差で寄ってくる」は、左右から交互に要素が現れることで、動きのあるリズムを作り出し、スクロール体験を楽しく、視覚的にも印象的に演出できる手法です。
2カラムがスクロールで自動的に左右に開く
See the Pen 2カラムがスクロールで自動的に左右に開く by et (@eito-oda) on CodePen.
「2カラムがスクロールで自動的に左右に開く」は、スクロールに合わせて左右のカラムが中心から開き、視覚的に情報を整理して見せるアニメーションです。
ページに動きを与えながら、コンテンツの区切りを自然に表現できます。
特徴
- 左右のカラムがスクロール連動で左右に開く
- 初期は中央寄せで非表示、スクロールで徐々に表示
- GSAPのScrollTriggerを使用した滑らかな動き
- フェードインとスライドが同時に発生
活用シーン
- サービスや商品の特徴を左右で分けて紹介
- 比較コンテンツ（Before/AfterやA/B）
- 見出しと補足情報を分けて表示
- ユーザーの注目を誘導したい場面
メリット
- コンテンツを左右に分けて整理でき、読みやすい
- スクロール連動で自然な動きと視線誘導を実現
- デザインに奥行きや動きを加えられる
- 実装が簡単で既存の2カラム構成に応用可能
「2カラムがスクロールで自動的に左右に開く」は、左右の要素をスクロールで広げることで、情報を整理しつつ動きのあるページ体験を提供できる表現手法です。
SVG テキストストロークで『文字を描く』
See the Pen SVG テキストストロークで『文字を描く』 by et (@eito-oda) on CodePen.
「SVG テキストストロークで『文字を描く』」は、スクロールやアニメーションに合わせて文字の輪郭線が描かれていく表現です。
SVGのストローク機能を利用することで、文字が手書きされるような演出を簡単に実装できます。
特徴
- SVGの
<text>要素を使用し、文字の輪郭線だけを描画 - stroke-dasharrayとstroke-dashoffsetを利用して線が引かれるアニメーション
- スクロール連動で文字が描かれる動き
- fillをなしにして、線だけで文字を強調
活用シーン
- サイトのヒーローヘッダーでの印象的なタイトル演出
- ブランド名やロゴのアニメーション表示
- プレゼンテーション的な演出やキャンペーンページ
- CTAや見出しでユーザーの目を引きたい場面
メリット
- 文字が描かれる動きで注目度を高められる
- SVGを使うため高解像度でも劣化せず、どのデバイスでも鮮明
- CSSだけでなくGSAPと組み合わせて高度なアニメーションが可能
- 実装が軽量で、ページの読み込みに影響を与えにくい
SVGテキストストロークを使った「文字を描く」アニメーションは、タイトルやロゴに動きを与え、ユーザーの視線を自然に誘導するインパクトのある表現手法です。
下方向へ少し落ちてからフワッと戻るフェードイン
See the Pen 下方向へ少し落ちてからフワッと戻るフェードイン by et (@eito-oda) on CodePen.
「下方向へ少し落ちてからフワッと戻るフェードイン」は、文字や要素が一度下に移動してから柔らかく元の位置に戻りつつ表示されるアニメーションです。
落下感と弾む動きが組み合わさることで、自然で印象的なフェードイン効果を作れます。
特徴
- 要素が少し下方向に移動してから元の位置に戻る動き
- opacityを0→1に変化させるフェードイン
- bounce系のイージングで柔らかい弾力感を表現
- 短時間で自然に目を引く演出
活用シーン
- 見出しやタイトルの登場時
- サイトのヒーローセクションで注目させたいテキスト
- CTAや重要メッセージの演出
- スクロールに連動してフェードインさせたい要素
メリット
- 自然な弾み効果で動きが柔らかく、ユーザーに違和感を与えない
- シンプルなCSS/GSAPアニメーションで軽量かつ実装容易
- 注目度を高めつつ、ページ全体の印象を洗練させられる
- 他のアニメーションとの組み合わせも簡単
下方向に少し落ちてから戻るフェードインは、柔らかい弾みとフェード効果を組み合わせた自然なアニメーションで、見出しや重要メッセージを効果的に強調できます。
まとめ
アニメーションは、派手さよりも 「適切な場面で、適切な動きを使うこと」が大切です。
ほんの少し動きを加えるだけでも、サイトの印象・読みやすさ・使いやすさは大きく変わります。
今回紹介したアニメーションはどれも 軽量・シンプル・汎用性が高い ものばかりです。
動きのあるレイアウトを少し加えるだけでも、サイト全体の雰囲気がぐっと明るくなることがあります。
ぜひ、制作されているプロジェクトの中で、合いそうな場面があれば取り入れてみてください。
