この記事にはプロモーションが含まれています。

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

2025-08-14

ケケンタ

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

ケケンタ

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

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

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

をご紹介します。

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

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

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

ケケンタ

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

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

あわせて読みたい

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

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

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

Webアニメーションの引き出しを増やすのにおすすめの書籍

動くWebデザインアイディア帳

created by Rinker

¥1,399 (2025/08/14 12:31:16時点 Amazon調べ-詳細)

ケケンタ

ケケンタのITブログでは、Webアプリ（PHP・Laravel）やWeb制作（WordPress・コーディング）について情報を発信しています。
学習中の方や実務をされている方など多くの方にアクセスいただいていますので、ぜひほかの記事も参考にしてみてください！

運動不足、気になっていませんか？

もしプログラミング学習やお仕事で運動不足が気になっているなら

連続屈伸運動がおすすめです！

ボタンにカーソルを合わせるだけで
カウントダウンが始まるタイマーをご用意してみました！

ケケンタ

無理のない範囲で、ぜひ隙間時間に屈伸運動を取り入れてみて下さい！

タイマースタート

3:00

1分 3分 5分 10分

※運動不足だと連続３分で取り組んでもかなり息が切れます。
（僕は加えて気分もちょっと悪くなりました……）
絶対にご無理の無い範囲でお取り組みください！

Laravelの教科書バージョン10対応【Laravel11サポートガイドあり】

created by Rinker

¥1,499 (2025/08/14 06:21:45時点 Amazon調べ-詳細)

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

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

効果的な使用場面

適している場面

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

避けるべき場面

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

実装方法の比較

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

カウントアップ

本記事でご紹介する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

<div class="percentage-container">
  <div class="percentage-item">
    <div class="percentage-number" data-target="85">0</div>
    <div class="percentage-label">満足度</div>
  </div>
  <div class="percentage-item">
    <div class="percentage-number" data-target="92">0</div>
    <div class="percentage-label">達成率</div>
  </div>
  <div class="percentage-item">
    <div class="percentage-number" data-target="78">0</div>
    <div class="percentage-label">効率性</div>
  </div>
</div>

<button class="start-btn" onclick="startCountUp()">開始</button>

③ 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

<div class="percentage-container">
  <div class="percentage-item fade-item">
    <div class="percentage-number" data-target="85">0</div>
    <div class="percentage-label">満足度</div>
  </div>
  <div class="percentage-item fade-item">
    <div class="percentage-number" data-target="92">0</div>
    <div class="percentage-label">達成率</div>
  </div>
  <div class="percentage-item fade-item">
    <div class="percentage-number" data-target="78">0</div>
    <div class="percentage-label">効率性</div>
  </div>
</div>

<button class="start-btn" onclick="startFadeCountUp()">開始</button>

③ 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

<div class="percentage-container">
  <div class="percentage-item scale-item">
    <div class="percentage-number" data-target="85">0</div>
    <div class="percentage-label">満足度</div>
  </div>
  <div class="percentage-item scale-item">
    <div class="percentage-number" data-target="92">0</div>
    <div class="percentage-label">達成率</div>
  </div>
  <div class="percentage-item scale-item">
    <div class="percentage-number" data-target="78">0</div>
    <div class="percentage-label">効率性</div>
  </div>
</div>

<button class="start-btn" onclick="startScaleCountUp()">開始</button>

③ 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

<div class="percentage-container">
  <div class="percentage-item slide-item">
    <div class="percentage-number" data-target="85">0</div>
    <div class="percentage-label">満足度</div>
  </div>
  <div class="percentage-item slide-item">
    <div class="percentage-number" data-target="92">0</div>
    <div class="percentage-label">達成率</div>
  </div>
  <div class="percentage-item slide-item">
    <div class="percentage-number" data-target="78">0</div>
    <div class="percentage-label">効率性</div>
  </div>
</div>

<button class="start-btn" onclick="startSlideCountUp()">開始</button>

③ 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

<div class="percentage-container">
  <div class="percentage-item zoom-item">
    <div class="percentage-number" data-target="85">0</div>
    <div class="percentage-label">満足度</div>
  </div>
  <div class="percentage-item zoom-item">
    <div class="percentage-number" data-target="92">0</div>
    <div class="percentage-label">達成率</div>
  </div>
  <div class="percentage-item zoom-item">
    <div class="percentage-number" data-target="78">0</div>
    <div class="percentage-label">効率性</div>
  </div>
</div>

<button class="start-btn" onclick="startZoomCountUp()">開始</button>

③ 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;
}