ドーナツチャート内訳アニメ

<div class="d05-07-02 io-reveal">
          <svg viewBox="0 0 160 160" class="d05-07-02-svg">
            <circle cx="80" cy="80" r="55" class="d05-07-02-bg"/>
            <circle cx="80" cy="80" r="55" class="d05-07-02-seg d05-07-02-seg1"/>
            <circle cx="80" cy="80" r="55" class="d05-07-02-seg d05-07-02-seg2"/>
            <circle cx="80" cy="80" r="55" class="d05-07-02-seg d05-07-02-seg3"/>
            <circle cx="80" cy="80" r="55" class="d05-07-02-seg d05-07-02-seg4"/>
            <text x="80" y="77" class="d05-07-02-total">1,240</text>
            <text x="80" y="92" class="d05-07-02-unit">件</text>
          </svg>
          <ul class="d05-07-02-legend">
            <li><i style="background:#3b82f6"></i>商品A 40%</li>
            <li><i style="background:#f59e0b"></i>商品B 30%</li>
            <li><i style="background:#10b981"></i>商品C 20%</li>
            <li><i style="background:#ec4899"></i>商品D 10%</li>
          </ul>
        </div>

.d05-07-02{width:100%;display:flex;flex-direction:column;align-items:center;gap:10px}
        .d05-07-02-svg{width:150px;height:150px}
        .d05-07-02-bg{fill:none;stroke:#f1f5f9;stroke-width:16}
        .d05-07-02-seg{fill:none;stroke-width:16;stroke-linecap:butt;transform-origin:80px 80px}
        .d05-07-02-seg1{stroke:#3b82f6;stroke-dasharray:138.2 207.4;stroke-dashoffset:138.2;transform:rotate(-90deg)}
        .d05-07-02-seg2{stroke:#f59e0b;stroke-dasharray:103.7 241.9;stroke-dashoffset:103.7;transform:rotate(54deg)}
        .d05-07-02-seg3{stroke:#10b981;stroke-dasharray:69.1 276.5;stroke-dashoffset:69.1;transform:rotate(162deg)}
        .d05-07-02-seg4{stroke:#ec4899;stroke-dasharray:34.6 311;stroke-dashoffset:34.6;transform:rotate(234deg)}
        .d05-07-02.is-in .d05-07-02-seg1{animation:d05-07-02-draw .6s ease forwards}
        .d05-07-02.is-in .d05-07-02-seg2{animation:d05-07-02-draw .5s ease forwards .6s}
        .d05-07-02.is-in .d05-07-02-seg3{animation:d05-07-02-draw .4s ease forwards 1.1s}
        .d05-07-02.is-in .d05-07-02-seg4{animation:d05-07-02-draw .3s ease forwards 1.5s}
        @keyframes d05-07-02-draw{to{stroke-dashoffset:0}}
        .d05-07-02-total{font-size:20px;font-weight:700;fill:#111827;text-anchor:middle;opacity:0}
        .d05-07-02-unit{font-size:9px;fill:#6b7280;text-anchor:middle;opacity:0}
        .d05-07-02.is-in .d05-07-02-total,.d05-07-02.is-in .d05-07-02-unit{animation:d05-07-02-fade .6s ease forwards 1.8s}
        @keyframes d05-07-02-fade{to{opacity:1}}
        .d05-07-02-legend{list-style:none;display:flex;flex-wrap:wrap;gap:8px 14px;padding:0;margin:0;font-size:11px;color:#374151;justify-content:center}
        .d05-07-02-legend li{display:flex;align-items:center;gap:5px}
        .d05-07-02-legend i{width:8px;height:8px;border-radius:2px;display:inline-block}