モダンWebサイトのためのSVGアニメーション：完全ガイド

アニメーションロゴの比較：
GIF（60フレーム）：850KB
動画（5秒）：1.2MB
SVGアニメーション：45KB

読み込み時間の改善：95%

.spin-icon {
  animation: rotate 2s linear infinite;
}

@keyframes rotate {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

.icon-path {
  fill: #333;
  transition: fill 0.3s ease;
}

.icon-path:hover {
  fill: #1cb721;
}

<svg viewBox="0 0 100 100">
  <circle cx="50" cy="50" r="40" fill="#1cb721">
    <animate
      attributeName="r"
      values="35;45;35"
      dur="1.5s"
      repeatCount="indefinite"/>
  </circle>
</svg>

<path d="M10,10 L90,10">
  <animate
    attributeName="d"
    values="M10,10 L90,10; M10,50 L90,50; M10,10 L90,10"
    dur="2s"
    repeatCount="indefinite"/>
</path>

<svg class="spinner" viewBox="0 0 50 50">
  <circle
    class="path"
    cx="25" cy="25" r="20"
    fill="none"
    stroke="#1cb721"
    stroke-width="4">
  </circle>
</svg>

<style>
.spinner {
  animation: rotate 1s linear infinite;
}
.path {
  stroke-dasharray: 90, 150;
  stroke-dashoffset: 0;
  animation: dash 1.5s ease-in-out infinite;
}
@keyframes rotate {
  100% { transform: rotate(360deg); }
}
@keyframes dash {
  0% { stroke-dasharray: 1, 150; stroke-dashoffset: 0; }
  50% { stroke-dasharray: 90, 150; stroke-dashoffset: -35; }
  100% { stroke-dasharray: 90, 150; stroke-dashoffset: -124; }
}
</style>

.draw-line {
  stroke-dasharray: 1000;
  stroke-dashoffset: 1000;
  animation: draw 3s ease forwards;
}

@keyframes draw {
  to { stroke-dashoffset: 0; }
}

<svg viewBox="0 0 24 24">
  <path id="icon" d="M3,6 L21,6">
    <!-- メニューアイコンからXへの変形 -->
    <animate
      id="toX"
      begin="click"
      attributeName="d"
      to="M4,4 L20,20"
      dur="0.3s"
      fill="freeze"/>
  </path>
</svg>

.bounce {
  animation: bounce 0.5s ease infinite alternate;
}

@keyframes bounce {
  from { transform: translateY(0); }
  to { transform: translateY(-10px); }
}

<svg viewBox="0 0 200 200" class="animated-logo">
  <!-- 背景の円 -->
  <circle class="bg" cx="100" cy="100" r="90"/>

  <!-- メインアイコン要素 -->
  <g class="icon-group">
    <path class="icon-part-1" d="..."/>
    <path class="icon-part-2" d="..."/>
  </g>

  <!-- テキスト要素 -->
  <text class="brand-text" x="100" y="180">Brand</text>
</svg>

/* ページ読み込み時にアニメーション */
.animated-logo .bg {
  opacity: 0;
  animation: fadeIn 0.5s ease forwards;
}

.animated-logo .icon-group {
  transform: scale(0);
  transform-origin: center;
  animation: scaleIn 0.5s ease 0.3s forwards;
}

.animated-logo .brand-text {
  opacity: 0;
  animation: fadeIn 0.5s ease 0.6s forwards;
}

@keyframes fadeIn {
  to { opacity: 1; }
}

@keyframes scaleIn {
  to { transform: scale(1); }
}

.icon-item {
  opacity: 0;
  animation: slideUp 0.4s ease forwards;
}

.icon-item:nth-child(1) { animation-delay: 0.1s; }
.icon-item:nth-child(2) { animation-delay: 0.2s; }
.icon-item:nth-child(3) { animation-delay: 0.3s; }
.icon-item:nth-child(4) { animation-delay: 0.4s; }

@keyframes slideUp {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

const observer = new IntersectionObserver((entries) => {
  entries.forEach(entry => {
    if (entry.isIntersecting) {
      entry.target.classList.add('animate');
    }
  });
});

document.querySelectorAll('.animate-on-scroll').forEach(el => {
  observer.observe(el);
});

const icon = document.querySelector('.interactive-icon');

icon.addEventListener('mouseenter', () => {
  icon.classList.add('active');
});

icon.addEventListener('mouseleave', () => {
  icon.classList.remove('active');
});

@media (prefers-reduced-motion: reduce) {
  .animated-element {
    animation: none;
    transition: none;
  }
}

<button id="toggle-animation">
  アニメーションを一時停止
</button>

<script>
document.getElementById('toggle-animation').onclick = () => {
  document.body.classList.toggle('no-animation');
};
</script>

<svg role="img" aria-label="読み込みインジケーター">
  <title>読み込み中</title>
  <!-- アニメーションコンテンツ -->
</svg>

/* 良い — GPU高速化 */
.efficient {
  transform: translateX(100px);
  opacity: 0.5;
}

/* 避ける — リペイントが発生 */
.inefficient {
  left: 100px;
  width: 200px;
}