積み上げ縦棒グラフアニメ

<div class="d05-07-06 io-reveal">
          <div class="d05-07-06-chart">
            <div class="d05-07-06-col">
              <div class="d05-07-06-seg d05-07-06-a" style="--h:40px"></div>
              <div class="d05-07-06-seg d05-07-06-b" style="--h:50px"></div>
              <div class="d05-07-06-seg d05-07-06-c" style="--h:30px"></div>
            </div>
            <div class="d05-07-06-col">
              <div class="d05-07-06-seg d05-07-06-a" style="--h:55px"></div>
              <div class="d05-07-06-seg d05-07-06-b" style="--h:35px"></div>
              <div class="d05-07-06-seg d05-07-06-c" style="--h:25px"></div>
            </div>
            <div class="d05-07-06-col">
              <div class="d05-07-06-seg d05-07-06-a" style="--h:45px"></div>
              <div class="d05-07-06-seg d05-07-06-b" style="--h:60px"></div>
              <div class="d05-07-06-seg d05-07-06-c" style="--h:20px"></div>
            </div>
            <div class="d05-07-06-col">
              <div class="d05-07-06-seg d05-07-06-a" style="--h:60px"></div>
              <div class="d05-07-06-seg d05-07-06-b" style="--h:45px"></div>
              <div class="d05-07-06-seg d05-07-06-c" style="--h:35px"></div>
            </div>
          </div>
          <div class="d05-07-06-labels"><span>Q1</span><span>Q2</span><span>Q3</span><span>Q4</span></div>
          <div class="d05-07-06-legend"><span><i style="background:#3b82f6"></i>製品A</span><span><i style="background:#10b981"></i>製品B</span><span><i style="background:#f59e0b"></i>製品C</span></div>
        </div>

.d05-07-06{width:100%;display:flex;flex-direction:column;align-items:center;gap:8px}
        .d05-07-06-chart{display:flex;gap:20px;align-items:flex-end;height:140px}
        .d05-07-06-col{display:flex;flex-direction:column-reverse;width:26px}
        .d05-07-06-seg{width:100%;height:0}
        .d05-07-06.is-in .d05-07-06-seg{animation:d05-07-06-grow .6s ease forwards}
        .d05-07-06-a{background:#3b82f6}
        .d05-07-06-b{background:#10b981}
        .d05-07-06-c{background:#f59e0b}
        .d05-07-06-col:nth-child(1) .d05-07-06-seg:nth-child(1){animation-delay:0s}
        .d05-07-06-col:nth-child(1) .d05-07-06-seg:nth-child(2){animation-delay:.1s}
        .d05-07-06-col:nth-child(1) .d05-07-06-seg:nth-child(3){animation-delay:.2s}
        .d05-07-06-col:nth-child(2) .d05-07-06-seg:nth-child(1){animation-delay:.15s}
        .d05-07-06-col:nth-child(2) .d05-07-06-seg:nth-child(2){animation-delay:.25s}
        .d05-07-06-col:nth-child(2) .d05-07-06-seg:nth-child(3){animation-delay:.35s}
        .d05-07-06-col:nth-child(3) .d05-07-06-seg:nth-child(1){animation-delay:.3s}
        .d05-07-06-col:nth-child(3) .d05-07-06-seg:nth-child(2){animation-delay:.4s}
        .d05-07-06-col:nth-child(3) .d05-07-06-seg:nth-child(3){animation-delay:.5s}
        .d05-07-06-col:nth-child(4) .d05-07-06-seg:nth-child(1){animation-delay:.45s}
        .d05-07-06-col:nth-child(4) .d05-07-06-seg:nth-child(2){animation-delay:.55s}
        .d05-07-06-col:nth-child(4) .d05-07-06-seg:nth-child(3){animation-delay:.65s}
        @keyframes d05-07-06-grow{to{height:var(--h)}}
        .d05-07-06-labels{display:flex;gap:20px;width:184px;justify-content:center;font-size:10px;color:#9ca3af}
        .d05-07-06-labels span{width:26px;text-align:center}
        .d05-07-06-legend{display:flex;gap:12px;font-size:10px;color:#374151}
        .d05-07-06-legend span{display:flex;align-items:center;gap:4px}
        .d05-07-06-legend i{width:8px;height:8px;border-radius:2px;display:inline-block}