WebサイトやLPを「良く見せたい」「ユーザーの視線を引きつけたい」
──そんな時に役立つのが CSS/JSアニメーション です。
今回は、コピペでそのまま使える 「CSS/JSアニメーション集10選」をまとめました。
デザインを邪魔せず、どのジャンルのサイトにも取り入れやすい動きを中心に掲載しているため、
ポートフォリオ・企業サイト・EC・サービス紹介ページなど、幅広い場面で活用できます。
制作にすぐ導入できる内容となっていますので、ぜひ気になるものから試してみてください。
文字が1文字ずつポップしながらフェードイン（scale＋fade）
See the Pen 文字が1文字ずつポップしながらフェードイン（scale＋fade） by et (@eito-oda) on CodePen.
文字が1文字ずつポップしながらフェードインするアニメーション。スクロールやページ読み込みに合わせて自然に文字が現れ、印象的で動きのある見出しを作れます。
特徴
- 文字ごとに個別でポップ（scale）＋フェードイン（opacity）する動き
- GSAPで簡単にアニメーション制御が可能
- staggerで文字ごとのタイミングを調整できる
- scaleとopacityの組み合わせで立体感のある表現
活用シーン
- 記事やブログの見出し演出
- キービジュアルやヒーローセクションでの注目文字表現
- ポートフォリオサイトのタイトルアニメーション
- キャッチコピーやキャンペーン情報で視覚的インパクトを与えたい場面
メリット
- 文字ごとの動きで視線を自然に誘導できる
- 単純なテキストも動きで印象的に見せられる
- アニメーション設定が簡単で再利用しやすい
- ページにリズム感や動的表現を加えられる
文字を1文字ずつポップさせながらフェードインさせる演出は、ブログやサイトの見出しに動きを加え、ユーザーの注目を集めやすくします。手軽にインパクトを与えられる表現としておすすめです。
上から落ちてくる
See the Pen 上から落ちてくる by et (@eito-oda) on CodePen.
見出しが上から落ちてくるアニメーション。スクロールに合わせて表示されることで、自然な動きと遊び心を演出でき、ユーザーの目を引きつけます。
特徴
- 上方向から落ちてくる動きで視覚的インパクトがある
- scaleとopacityを組み合わせることで立体感を演出
- bounce系のイージングで弾むような表現が可能
- GSAPとScrollTriggerでスクロール連動アニメーションを簡単に実装
活用シーン
- ブログやサイトの見出しに注目を集めたい時
- セクションタイトルやカードタイトルの演出
- キービジュアルやヒーローエリアのアニメーション
- ユーザーの視線を自然に誘導したい場合
メリット
- 単調な見出しに動きを加えて印象的にできる
- ページ全体の動的表現を簡単に強化できる
- スクロール連動で自然なアニメーションが実現可能
- ユーザーの注意を効果的に引きつけられる
上から落ちてくる見出しアニメーションは、ブログやWebサイトで動きを加えたい時に最適。簡単に設定でき、自然な立体感とインパクトを与えられる表現です。
円が広がって出現
See the Pen 円が広がって出現 by et (@eito-oda) on CodePen.
見出しが円形のマスクで隠されており、スクロールに合わせて円が広がることで文字が徐々に現れるアニメーションです。視覚的にインパクトがあり、ユーザーの注目を集めやすい演出です。
特徴
- 円形マスクが中心から広がることで文字が出現
- clip-pathとGSAPを組み合わせた滑らかなアニメーション
- スクロール連動で自然に表示される
- 丸い形状のマスクにより柔らかく可愛い印象を演出可能
活用シーン
- ブログやWebサイトの見出し演出
- サービス紹介やセクションタイトルで注目を集めたい時
- カードやアイコンタイトルの動的表示
- コンテンツのポイント強調に最適
メリット
- 単調な見出しに動きを加え、印象的にできる
- ユーザーの視線を自然に誘導できる
- 簡単にGSAPとclip-pathで実装可能
- 柔らかく親しみやすい印象を演出できる
円形マスクが広がって文字が現れるアニメーションは、見出しやセクションタイトルに動きを加えたいときに最適。簡単に設定でき、ユーザーの注目を引きつけやすい表現です。
画像が横にスライドしながらフェードイン
See the Pen 画像が横にスライドしながらフェードイン by et (@eito-oda) on CodePen.
スクロールに合わせて画像が横方向にスライドしながら徐々にフェードインするアニメーションです。シンプルながら視覚的な動きが加わることで、コンテンツの魅力を引き立てます。
特徴
- 画像が左または右から滑るように移動しつつ、透明度が変化
- GSAPとScrollTriggerを活用してスクロール連動で自然に表示
- 初期状態で画像は隠れており、ユーザーのスクロールに合わせて登場
- スライドとフェードの組み合わせで立体感のある表現
活用シーン
- ブログ記事のサムネイル表示
- ポートフォリオや作品紹介で画像を強調
- セクションのアイキャッチ画像に動きを付与
- 商品ページやギャラリーの演出で注目を集める
メリット
- コンテンツに動きが加わり、ユーザーの注目を引きやすい
- スクロールに応じて表示されるため自然な導線作りが可能
- 実装が簡単でレスポンシブにも対応しやすい
- 動きの演出でページ全体の印象を華やかにできる
横スライド＋フェードインの画像アニメーションは、スクロールに合わせて画像を自然に登場させたいときに最適。視覚的に動きがあり、ブログやポートフォリオの魅力を高める効果があります。
文字に虹色グラデーションが流れる（アニメテキスト）
See the Pen 文字に虹色グラデーションが流れる（アニメテキスト） by et (@eito-oda) on CodePen.
文字に虹色のグラデーションが流れるアニメーションです。背景グラデーションをテキストに適用し、時間経過でグラデーションが移動することで、文字に動きと華やかさを加えます。
特徴
- 文字の中を虹色のグラデーションがスムーズに流れる
- CSSアニメーションのみで軽量に実装可能
background-clipとtext-fill-colorを活用して文字だけにグラデーションを適用- 無限ループで常に動くアニメーション表現
活用シーン
- 見出しやタイトルに注目を集めたい場合
- イベント告知やキャンペーンバナー
- ポートフォリオや個人サイトでのデザインアクセント
- SNS投稿やプレゼン資料のキャッチコピー演出
メリット
- 記事やページに華やかさを加えられる
- JS不要でCSSだけで簡単に表現可能
- 視覚的に印象的でユーザーの目を引きやすい
- レスポンシブ対応が容易でどの画面サイズでも美しい
虹色グラデーションを文字に流すアニメテキストは、タイトルや見出しに動きをつけて視覚的に強調したいときに最適。シンプルなCSSだけで華やかさを演出でき、ユーザーの注目を集めやすくなります。
Vanta.js：波
See the Pen vanta.js：波 by et (@eito-oda) on CodePen.
Vanta.jsの「Waves」を利用した背景アニメーションです。3Dの波がゆったりと動く演出で、サイトやセクションに動きと深みを与えます。マウス操作やスクロールに連動させることも可能で、インタラクティブなデザインを簡単に実装できます。
特徴
- 3D風のリアルな波がゆっくり動く背景アニメーション
- Vanta.jsとThree.jsを使用した軽量でモダンな表現
- マウス操作やタッチ操作でインタラクティブに制御可能
- スクロールやページ表示に自然に溶け込む演出
活用シーン
- ヒーローセクションの背景に設置して印象的に見せたい場合
- ウェブサイトのトップページやランディングページ
- ポートフォリオサイトの背景演出
- リラックス系、クリエイティブ系のサイトデザイン
メリット
- ページ全体に動きを付けてユーザーの注目を集められる
- CSSやJSを組み合わせずに簡単に3Dアニメーションを実装可能
- 軽量で動作もスムーズ、スマホやPCでも対応可能
- インタラクティブ要素として視覚的な楽しさを追加できる
Vanta.jsの「Waves」を使えば、動きのある美しい波の背景を簡単に実装可能。サイトの印象をアップさせつつ、ユーザーにリッチな体験を提供できるインタラクティブな見出しやセクション演出に最適です。
hover時左下と右下の色が真ん中に集まる
See the Pen hover時左下と右下の色が真ん中に集まる by et (@eito-oda) on CodePen.
リンクやボタンにマウスを乗せた際、左下と右下の色が中央に向かって集まるアニメーションです。動きに立体感が生まれ、視覚的に印象的な演出が可能です。ユーザーの目を引きやすく、インタラクティブなデザインを簡単に追加できます。
特徴
- 左下と右下の色が中央に向かってスライドするユニークな演出
- CSSの
::beforeと::after疑似要素で実装 - トランジションで滑らかな動き
- ボタンやリンクのテキストは常に前面に表示され、視認性を確保
活用シーン
- CTAボタンやリンクに動きを付けたい場合
- トップページやランディングページのアクセント演出
- ポートフォリオやクリエイティブ系サイトで印象的に見せる際
- ユーザーのマウスアクションに応じたインタラクション演出
メリット
- ユーザーの注目を集めやすくクリック率向上に期待
- 簡単なCSSで実装でき、軽量で動作もスムーズ
- デザインにアクセントを追加してサイトを華やかにできる
- テキストの可読性を損なわず演出効果を付加可能
左右下から中央に色が集まるアニメーションは、シンプルながら視覚的に印象的なボタン演出に最適。サイトに動きを加え、ユーザー体験を向上させるインタラクティブデザインとして活用できます。
hoverで文字拡大
See the Pen hoverで文字拡大 by et (@eito-oda) on CodePen.
文字にマウスを乗せると、文字が少し大きく拡大するアニメーションです。シンプルながら視覚的なアクセントを加えられ、ユーザーの注目を集める効果があります。CSSのトランジションのみで実装できるため、軽量で高速に動作します。
特徴
- 文字が滑らかに拡大するシンプルなアニメーション
- CSSの
transform: scaleとtransitionで実装 - 軽量で読み込みや動作が速い
- デザインに自然なアクセントを追加可能
活用シーン
- ボタンやリンクテキストのホバー演出
- 見出しやタイトルの強調
- ポートフォリオやブログ記事でのインタラクティブ効果
- CTAや重要な情報に視線を誘導したい場合
メリット
- ユーザーの視線を集めやすくクリック率や注目度向上に貢献
- 実装が簡単でCSSだけで完結
- デザインを損なわずさりげない演出が可能
- 軽量でパフォーマンスへの影響が少ない
ホバー時の文字拡大は、シンプルながらも視覚的に効果的な演出。重要な文字やリンクに使うことで、ユーザーの注目を自然に誘導できるインタラクティブなデザインです。
hoverでテキストを表示
See the Pen hoverでテキストを表示 by et (@eito-oda) on CodePen.
画像の上にマウスを乗せると、テキストがふわっと表示されるアニメーションです。主に画像に対してアクションや説明を加える際に使われ、ユーザーに自然に情報を伝えることができます。CSSの::beforeとopacityを活用して簡単に実装可能です。
特徴
- 画像上にテキストが重なるホバー演出
- CSSの
opacityとtransitionで滑らかに表示 - 視覚的にわかりやすく、情報を補足できる
- 実装が軽量で読み込みや動作が速い
活用シーン
- ポートフォリオのサムネイルに詳細情報を表示
- 商品画像の「VIEW」や「DETAIL」ボタン代わり
- ギャラリーやブログ記事の画像説明
- CTAやリンク先の誘導を視覚的に示したい場合
メリット
- ユーザーがマウスを乗せた際に情報を目立たせられる
- シンプルで軽量、パフォーマンスへの影響が少ない
- デザインを損なわずに情報を補足可能
- 視覚的に直感的でユーザーの理解を促進
画像にホバーするとテキストが表示される演出は、情報を直感的に伝えつつデザインを損なわない方法です。ポートフォリオや商品ギャラリーなどで活用することで、ユーザー体験を向上させることができます。
パルスリングローディング
See the Pen パルスリング by et (@eito-oda) on CodePen.
中心からリングが膨張と収縮を繰り返すパルスアニメーションで、読み込み中や待機状態を視覚的に表現するローディング演出です。CSSのkeyframesを使ったシンプルなアニメーションで軽量に実装できます。
特徴
- リングが脈打つように拡大・縮小するアニメーション
opacityとscaleで視覚的に動きを強調- シンプルで軽量、CSSのみで実装可能
- 中央配置すると視覚的にユーザーの注目を集めやすい
活用シーン
- ページやコンテンツの読み込み中に表示
- データ取得や非同期処理の待機中の演出
- モーダルやポップアップの読み込み時
- ボタン押下後の処理待機のフィードバック
メリット
- ユーザーに待機中であることを視覚的に伝えられる
- デザインを邪魔せず、軽量でパフォーマンスに優しい
- 他のローディング演出と比べてシンプルで実装しやすい
- 色やサイズを変えるだけでデザインに合わせられる
パルスリングローディングは、シンプルかつ視覚的に分かりやすい待機演出です。ページ読み込みや非同期処理中のユーザー体験を向上させるために、軽量で使いやすいアニメーションとして最適です。
まとめ
アニメーションは、派手さよりも 「適切な場面で、適切な動きを使うこと」が大切です。
ほんの少し動きを加えるだけでも、サイトの印象・読みやすさ・使いやすさは大きく変わります。
今回紹介したアニメーションはどれも 軽量・シンプル・汎用性が高い ものばかりです。
動きのあるレイアウトを少し加えるだけでも、サイト全体の雰囲気がぐっと明るくなることがあります。
ぜひ、制作されているプロジェクトの中で、合いそうな場面があれば取り入れてみてください。
