【コピペOK】パーセンテージアニメーション｜5種類【Web制作】

ケケンタ — Thu, 14 Aug 2025 04:00:45 +0000

ケケンタ

パーセンテージ表示にアニメーション効果を追加したい……

ケケンタ

数値の変化をより魅力的に表示したい……

今回はこのようなお悩みをお持ちの方へ向けて

Web制作において必須のUI要素
パーセンテージアニメーション

をご紹介します。

5種類のアニメーション効果を完全網羅した実装なので、いままさに「パーセンテージ表示を実装しないといけない！」という方は丸っとコピペしてどうぞご活用ください！

この記事で紹介するパーセンテージアニメーション

カウントアップ（数字のカウントアップ）
フェード効果
スケール効果
スライド効果
ズーム効果

ケケンタ

特に統計表示や達成率表示には、パーセンテージアニメーションが非常に効果的です。この記事のコードをご活用いただきWeb制作の効率化に繋がれば何よりです。

なお、今回ご紹介するアニメーションはCSSとJavaScriptで実装できるので、基本的なコーディング知識があれば安心してご利用いただけます。

あわせて読みたい

【Web制作】ボタンホバーアニメーション完全版｜8カテゴリ・53種類を網羅

【Web制作】ナビゲーションタブアニメーション完全版｜5カテゴリ・26種類を網羅

【Web制作】メニューアニメーション完全版｜8カテゴリ・40種類を網羅

パーセンテージアニメーションとは

パーセンテージアニメーションは、数値の変化を視覚的に表現するアニメーション効果です。ユーザーに達成感や進捗状況を分かりやすく伝え、データの重要性を強調する効果的な手法です。

効果的な使用場面

適している場面

統計データの表示
達成率・進捗率の表示
スキルレベル表示
投票結果の表示
ゲームのスコア表示

避けるべき場面

即座に変化する数値
正確性が重要な数値
ユーザーが操作を中断できない場面

実装方法の比較

アニメーション	難易度	視覚的インパクト	パフォーマンス	ブラウザ対応
カウントアップ	⭐⭐	⭐⭐⭐	⭐⭐⭐⭐	⭐⭐⭐⭐⭐
フェード効果	⭐⭐	⭐⭐⭐	⭐⭐⭐⭐	⭐⭐⭐⭐⭐
スケール効果	⭐⭐	⭐⭐⭐	⭐⭐⭐⭐	⭐⭐⭐⭐⭐
スライド効果	⭐⭐	⭐⭐⭐⭐	⭐⭐⭐⭐	⭐⭐⭐⭐⭐
ズーム効果	⭐⭐⭐	⭐⭐⭐⭐	⭐⭐⭐	⭐⭐⭐⭐

カウントアップ

本記事でご紹介するjavascriptの最後に下記のコードを追加することで、スクロール時にアニメーションを発火させることが可能です。

スクロールに合わせて発火させたい場合は以下をjavascriptに追記

// スクロール時に自動開始
function startCountUpOnScroll() {
  const observer = new IntersectionObserver((entries) => {
    entries.forEach(entry => {
      if (entry.isIntersecting) {
        startCountUp();
        observer.unobserve(entry.target);
      }
    });
  });

  observer.observe(document.querySelector('.percentage-container'));
}

// ページ読み込み時に監視開始
document.addEventListener('DOMContentLoaded', startCountUpOnScroll);

① デモ

See the Pen パーセンテージカウントアップ by ケケンタ (@lgshifbg-the-looper) on CodePen.

このカウントアップの特徴

シンプルで分かりやすい実装
高いパフォーマンス
すべてのブラウザで対応

② HTML

③ CSS

/* 共通スタイル */
.percentage-container {
  display: flex;
  justify-content: space-around;
  align-items: center;
  max-width: 600px;
  margin: 0 auto;
  padding: 40px 20px;
}

.percentage-item {
  text-align: center;
  padding: 20px;
}

.percentage-number {
  font-size: 48px;
  font-weight: bold;
  margin-bottom: 10px;
  transition: all 0.3s ease;
}

.percentage-label {
  font-size: 16px;
  color: #666;
  font-weight: 500;
}

.start-btn {
  background: #4CAF50;
  color: white;
  border: none;
  padding: 12px 24px;
  border-radius: 5px;
  cursor: pointer;
  font-size: 16px;
  margin: 20px auto;
  display: block;
  transition: all 0.3s ease;
}

.start-btn:hover {
  background: #45a049;
  transform: translateY(-2px);
  box-shadow: 0 4px 8px rgba(0,0,0,0.1);
}

/* カウントアップ固有のスタイル */
.percentage-number {
  color: #4CAF50;
}

/* カウントアップアニメーション */
@keyframes countUp {
  from {
    transform: scale(1);
  }
  50% {
    transform: scale(1.1);
  }
  to {
    transform: scale(1);
  }
}

.percentage-number.animating {
  animation: countUp 0.5s ease-in-out;
}

④ JavaScript

function startCountUp() {
  const numbers = document.querySelectorAll('.percentage-number');

  numbers.forEach(number => {
    const target = parseInt(number.getAttribute('data-target'));
    const duration = 2000; // 2秒
    const increment = target / (duration / 16); // 60fps
    let current = 0;

    const timer = setInterval(() => {
      current += increment;
      if (current >= target) {
        current = target;
        clearInterval(timer);
      }

      number.textContent = Math.floor(current);

      // アニメーション効果を追加
      if (current % 10 < increment) {
        number.classList.add('animating');
        setTimeout(() => {
          number.classList.remove('animating');
        }, 500);
      }
    }, 16);
  });
}

⑤ カスタマイズ例

/* カラーテーマの変更 */
.percentage-number {
  color: #2196F3;
}

/* フォントサイズの調整 */
.percentage-number {
  font-size: 64px;
}

/* アニメーション速度の調整 */
.percentage-number.animating {
  animation: countUp 0.3s ease-in-out;
}

フェード効果

① デモ

See the Pen パーセンテージフェード by ケケンタ (@lgshifbg-the-looper) on CodePen.

このフェード効果の特徴

スムーズな表示・非表示
視覚的に優しい印象
高パフォーマンス

② HTML

③ CSS

/* 共通スタイル */
.percentage-container {
  display: flex;
  justify-content: space-around;
  align-items: center;
  max-width: 600px;
  margin: 0 auto;
  padding: 40px 20px;
}

.percentage-item {
  text-align: center;
  padding: 20px;
}

.percentage-number {
  font-size: 48px;
  font-weight: bold;
  margin-bottom: 10px;
  transition: all 0.3s ease;
}

.percentage-label {
  font-size: 16px;
  color: #666;
  font-weight: 500;
}

.start-btn {
  background: #4CAF50;
  color: white;
  border: none;
  padding: 12px 24px;
  border-radius: 5px;
  cursor: pointer;
  font-size: 16px;
  margin: 20px auto;
  display: block;
  transition: all 0.3s ease;
}

.start-btn:hover {
  background: #45a049;
  transform: translateY(-2px);
  box-shadow: 0 4px 8px rgba(0,0,0,0.1);
}

/* フェード固有のスタイル */
.fade-item {
  opacity: 0;
  transform: translateY(20px);
  transition: all 0.6s ease;
}

.fade-item.visible {
  opacity: 1;
  transform: translateY(0);
}

.fade-item .percentage-number {
  color: #FF9800;
}

/* フェードアニメーション */
@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(30px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.fade-item.animating {
  animation: fadeInUp 0.8s ease-out;
}

④ JavaScript

function startFadeCountUp() {
  const items = document.querySelectorAll('.fade-item');

  items.forEach((item, index) => {
    setTimeout(() => {
      item.classList.add('visible');
      item.classList.add('animating');

      const number = item.querySelector('.percentage-number');
      const target = parseInt(number.getAttribute('data-target'));
      const duration = 1500;
      const increment = target / (duration / 16);
      let current = 0;

      const timer = setInterval(() => {
        current += increment;
        if (current >= target) {
          current = target;
          clearInterval(timer);
        }

        number.textContent = Math.floor(current);
      }, 16);

      setTimeout(() => {
        item.classList.remove('animating');
      }, 800);
    }, index * 200);
  });
}

⑤ カスタマイズ例

/* フェード効果の強度調整 */
.fade-item {
  opacity: 0;
  transform: translateY(40px);
}

/* フェード速度の調整 */
.fade-item {
  transition: all 0.8s ease;
}

/* フェード方向の変更 */
.fade-item {
  transform: translateX(20px);
}

スケール効果

① デモ

See the Pen パーセンテージスケール by ケケンタ (@lgshifbg-the-looper) on CodePen.

このスケール効果の特徴

拡大・縮小による動的表現
視覚的なインパクト
モダンな印象

② HTML

③ CSS

/* 共通スタイル */
.percentage-container {
  display: flex;
  justify-content: space-around;
  align-items: center;
  max-width: 600px;
  margin: 0 auto;
  padding: 40px 20px;
}

.percentage-item {
  text-align: center;
  padding: 20px;
}

.percentage-number {
  font-size: 48px;
  font-weight: bold;
  margin-bottom: 10px;
  transition: all 0.3s ease;
}

.percentage-label {
  font-size: 16px;
  color: #666;
  font-weight: 500;
}

.start-btn {
  background: #4CAF50;
  color: white;
  border: none;
  padding: 12px 24px;
  border-radius: 5px;
  cursor: pointer;
  font-size: 16px;
  margin: 20px auto;
  display: block;
  transition: all 0.3s ease;
}

.start-btn:hover {
  background: #45a049;
  transform: translateY(-2px);
  box-shadow: 0 4px 8px rgba(0,0,0,0.1);
}

/* スケール固有のスタイル */
.scale-item {
  opacity: 0;
  transform: scale(0.5);
  transition: all 0.5s ease;
}

.scale-item.visible {
  opacity: 1;
  transform: scale(1);
}

.scale-item .percentage-number {
  color: #9C27B0;
}

/* スケールアニメーション */
@keyframes scaleIn {
  from {
    transform: scale(0.3);
    opacity: 0;
  }
  to {
    transform: scale(1);
    opacity: 1;
  }
}

.scale-item.animating {
  animation: scaleIn 0.6s ease-out;
}

④ JavaScript

function startScaleCountUp() {
  const items = document.querySelectorAll('.scale-item');

  items.forEach((item, index) => {
    setTimeout(() => {
      item.classList.add('visible');
      item.classList.add('animating');

      const number = item.querySelector('.percentage-number');
      const target = parseInt(number.getAttribute('data-target'));
      const duration = 1200;
      const increment = target / (duration / 16);
      let current = 0;

      const timer = setInterval(() => {
        current += increment;
        if (current >= target) {
          current = target;
          clearInterval(timer);
        }

        number.textContent = Math.floor(current);
      }, 16);

      setTimeout(() => {
        item.classList.remove('animating');
      }, 600);
    }, index * 150);
  });
}

⑤ カスタマイズ例

/* スケール効果の強度調整 */
.scale-item {
  transform: scale(0.2);
}

.scale-item.visible {
  transform: scale(1.1);
}

/* スケール速度の調整 */
.scale-item {
  transition: all 0.8s ease;
}

スライド効果

① デモ

See the Pen パーセンテージスライド by ケケンタ (@lgshifbg-the-looper) on CodePen.

このスライド効果の特徴

動的なスライド表現
視覚的インパクトが高い
スムーズなアニメーション

② HTML

③ CSS

/* 共通スタイル */
.percentage-container {
  display: flex;
  justify-content: space-around;
  align-items: center;
  max-width: 600px;
  margin: 0 auto;
  padding: 40px 20px;
}

.percentage-item {
  text-align: center;
  padding: 20px;
}

.percentage-number {
  font-size: 48px;
  font-weight: bold;
  margin-bottom: 10px;
  transition: all 0.3s ease;
}

.percentage-label {
  font-size: 16px;
  color: #666;
  font-weight: 500;
}

.start-btn {
  background: #4CAF50;
  color: white;
  border: none;
  padding: 12px 24px;
  border-radius: 5px;
  cursor: pointer;
  font-size: 16px;
  margin: 20px auto;
  display: block;
  transition: all 0.3s ease;
}

.start-btn:hover {
  background: #45a049;
  transform: translateY(-2px);
  box-shadow: 0 4px 8px rgba(0,0,0,0.1);
}

/* スライド固有のスタイル */
.slide-item {
  opacity: 0;
  transform: translateX(-50px);
  transition: all 0.6s ease;
}

.slide-item.visible {
  opacity: 1;
  transform: translateX(0);
}

.slide-item .percentage-number {
  color: #E91E63;
}

/* スライドアニメーション */
@keyframes slideIn {
  from {
    transform: translateX(-100px);
    opacity: 0;
  }
  to {
    transform: translateX(0);
    opacity: 1;
  }
}

.slide-item.animating {
  animation: slideIn 0.7s ease-out;
}

④ JavaScript

function startSlideCountUp() {
  const items = document.querySelectorAll('.slide-item');

  items.forEach((item, index) => {
    setTimeout(() => {
      item.classList.add('visible');
      item.classList.add('animating');

      const number = item.querySelector('.percentage-number');
      const target = parseInt(number.getAttribute('data-target'));
      const duration = 1800;
      const increment = target / (duration / 16);
      let current = 0;

      const timer = setInterval(() => {
        current += increment;
        if (current >= target) {
          current = target;
          clearInterval(timer);
        }

        number.textContent = Math.floor(current);
      }, 16);

      setTimeout(() => {
        item.classList.remove('animating');
      }, 700);
    }, index * 180);
  });
}

⑤ カスタマイズ例

/* スライド方向の変更 */
.slide-item {
  transform: translateY(50px);
}

.slide-item.visible {
  transform: translateY(0);
}

/* スライド速度の調整 */
.slide-item {
  transition: all 0.8s ease;
}

ズーム効果

① デモ

See the Pen パーセンテージズーム by ケケンタ (@lgshifbg-the-looper) on CodePen.

このズーム効果の特徴

拡大・縮小による動的表現
視覚的インパクトが高い
注目を集める効果

② HTML

③ CSS

/* 共通スタイル */
.percentage-container {
  display: flex;
  justify-content: space-around;
  align-items: center;
  max-width: 600px;
  margin: 0 auto;
  padding: 40px 20px;
}

.percentage-item {
  text-align: center;
  padding: 20px;
}

.percentage-number {
  font-size: 48px;
  font-weight: bold;
  margin-bottom: 10px;
  transition: all 0.3s ease;
}

.percentage-label {
  font-size: 16px;
  color: #666;
  font-weight: 500;
}

.start-btn {
  background: #4CAF50;
  color: white;
  border: none;
  padding: 12px 24px;
  border-radius: 5px;
  cursor: pointer;
  font-size: 16px;
  margin: 20px auto;
  display: block;
  transition: all 0.3s ease;
}

.start-btn:hover {
  background: #45a049;
  transform: translateY(-2px);
  box-shadow: 0 4px 8px rgba(0,0,0,0.1);
}

/* ズーム固有のスタイル */
.zoom-item {
  opacity: 0;
  transform: scale(0.8);
  transition: all 0.7s ease;
}

.zoom-item.visible {
  opacity: 1;
  transform: scale(1);
}

.zoom-item .percentage-number {
  color: #607D8B;
}

/* ズームアニメーション */
@keyframes zoomIn {
  from {
    transform: scale(0.5);
    opacity: 0;
  }
  50% {
    transform: scale(1.1);
  }
  to {
    transform: scale(1);
    opacity: 1;
  }
}

.zoom-item.animating {
  animation: zoomIn 0.8s ease-out;
}

④ JavaScript

function startZoomCountUp() {
  const items = document.querySelectorAll('.zoom-item');

  items.forEach((item, index) => {
    setTimeout(() => {
      item.classList.add('visible');
      item.classList.add('animating');

      const number = item.querySelector('.percentage-number');
      const target = parseInt(number.getAttribute('data-target'));
      const duration = 1600;
      const increment = target / (duration / 16);
      let current = 0;

      const timer = setInterval(() => {
        current += increment;
        if (current >= target) {
          current = target;
          clearInterval(timer);
        }

        number.textContent = Math.floor(current);
      }, 16);

      setTimeout(() => {
        item.classList.remove('animating');
      }, 800);
    }, index * 220);
  });
}

⑤ カスタマイズ例

/* ズーム効果の強度調整 */
.zoom-item {
  transform: scale(0.3);
}

.zoom-item.visible {
  transform: scale(1.2);
}

/* ズーム速度の調整 */
.zoom-item {
  transition: all 1s ease;
}

まとめ

今回ご紹介した5種類のパーセンテージアニメーションは、それぞれ異なる特徴と用途があります。

用途別おすすめ

統計表示: カウントアップ・フェード効果
達成率表示: スケール効果・スライド効果
プレミアムサイト: ズーム効果

実装のポイント

パフォーマンスを考慮: アニメーションは軽量に
ユーザビリティを重視: 数値が分かりやすく
ブラウザ対応: 幅広いブラウザで動作するように
アクセシビリティ: スクリーンリーダー対応も考慮

ケケンタ

パーセンテージアニメーションは、ユーザーエクスペリエンスを向上させる重要な要素です。この記事のコードを参考に、プロジェクトに最適なアニメーションを実装してください！

あわせて読みたい

【Web制作】ボタンホバーアニメーション完全版｜8カテゴリ・53種類を網羅

【Web制作】ナビゲーションタブアニメーション完全版｜5カテゴリ・26種類を網羅

【Web制作】メニューアニメーション完全版｜8カテゴリ・40種類を網羅

もっと効率的にWeb制作を学びたい方へ

Web制作の学習は楽しいものですが、一人で進めていると「これで合っているのかな？」と不安になることもありますよね。

僕も独学でWeb制作を学んできましたが、今思うと「もっと早く知りたかった」と思うことがたくさんあります。

特に以下のような方は、一度プログラミングスクールの利用を検討してみることをおすすめします。

学習の方向性に迷いがある方
効率的にスキルを身につけたい方
転職や副業でWeb制作を活用したい方
挫折経験がある方

忍者CODEなら、業界最安値で24時間サポート付きの学習環境が整っています。

ご興味のある方は、こちらの記事で詳しくご紹介しています。

基本的なアニメーション

スクロール系

メニュー・タブ・ナビゲーション

＼どれを読むか迷ったときのおすすめ‼／

フォーム・UI要素

＼どれを読むか迷ったときのおすすめ‼／

ボタン・アイコン

＼どれを読むか迷ったときのおすすめ‼／

テキスト

＼どれを読むか迷ったときのおすすめ‼／

【完全版】テキスト・タイポグラフィアニメーション完全ガイド｜5カテゴリ・26種類

スライダー

【Splide】サムネイル型スライダーの簡単な作成方法【JSライブラリ】

特殊効果

背景アニメーション完全ガイド｜5種類

パーセンテージ – ケケンタの独学ITブログ

【コピペOK】パーセンテージアニメーション｜5種類【Web制作】

パーセンテージアニメーションとは

効果的な使用場面

実装方法の比較

カウントアップ

① デモ

② HTML

③ CSS

④ JavaScript

⑤ カスタマイズ例

フェード効果

① デモ

② HTML

③ CSS

④ JavaScript

⑤ カスタマイズ例

スケール効果

① デモ

② HTML

③ CSS

④ JavaScript

⑤ カスタマイズ例

スライド効果

① デモ

② HTML

③ CSS

④ JavaScript

⑤ カスタマイズ例

ズーム効果

① デモ

② HTML

③ CSS

④ JavaScript

⑤ カスタマイズ例

まとめ

用途別おすすめ

実装のポイント

もっと効率的にWeb制作を学びたい方へ

関連記事

基本的なアニメーション

スクロール系

メニュー・タブ・ナビゲーション

フォーム・UI要素

ボタン・アイコン

テキスト

スライダー

特殊効果