スパークライン一覧アニメ

<div class="d05-07-09 io-reveal">
          <div class="d05-07-09-row">
            <span class="d05-07-09-label">検索流入</span>
            <svg viewBox="0 0 80 24" class="d05-07-09-spark"><path d="M2,18 L18,10 L34,14 L50,6 L66,9 L78,3" class="d05-07-09-path"/></svg>
            <span class="d05-07-09-val">+12%</span>
          </div>
          <div class="d05-07-09-row">
            <span class="d05-07-09-label">SNS経由</span>
            <svg viewBox="0 0 80 24" class="d05-07-09-spark"><path d="M2,8 L18,12 L34,6 L50,14 L66,10 L78,4" class="d05-07-09-path"/></svg>
            <span class="d05-07-09-val">+6%</span>
          </div>
          <div class="d05-07-09-row">
            <span class="d05-07-09-label">直帰率</span>
            <svg viewBox="0 0 80 24" class="d05-07-09-spark"><path d="M2,4 L18,8 L34,10 L50,14 L66,16 L78,20" class="d05-07-09-path"/></svg>
            <span class="d05-07-09-val">-3%</span>
          </div>
          <div class="d05-07-09-row">
            <span class="d05-07-09-label">滞在時間</span>
            <svg viewBox="0 0 80 24" class="d05-07-09-spark"><path d="M2,16 L18,15 L34,9 L50,11 L66,5 L78,7" class="d05-07-09-path"/></svg>
            <span class="d05-07-09-val">+9%</span>
          </div>
        </div>

.d05-07-09{width:100%;display:flex;flex-direction:column;gap:14px}
        .d05-07-09-row{display:flex;align-items:center;gap:10px;font-size:11px}
        .d05-07-09-label{width:56px;flex:none;color:#374151}
        .d05-07-09-spark{width:80px;height:24px;flex:none}
        .d05-07-09-path{fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:120;stroke-dashoffset:120}
        .d05-07-09-val{margin-left:auto;font-weight:600;flex:none}
        .d05-07-09.is-in .d05-07-09-row:nth-child(1) .d05-07-09-path{stroke:#3b82f6;animation:d05-07-09-draw .8s ease forwards 0s}
        .d05-07-09.is-in .d05-07-09-row:nth-child(2) .d05-07-09-path{stroke:#10b981;animation:d05-07-09-draw .8s ease forwards .2s}
        .d05-07-09.is-in .d05-07-09-row:nth-child(3) .d05-07-09-path{stroke:#ef4444;animation:d05-07-09-draw .8s ease forwards .4s}
        .d05-07-09.is-in .d05-07-09-row:nth-child(4) .d05-07-09-path{stroke:#f59e0b;animation:d05-07-09-draw .8s ease forwards .6s}
        @keyframes d05-07-09-draw{to{stroke-dashoffset:0}}
        .d05-07-09-row:nth-child(1) .d05-07-09-val{color:#3b82f6}
        .d05-07-09-row:nth-child(2) .d05-07-09-val{color:#10b981}
        .d05-07-09-row:nth-child(3) .d05-07-09-val{color:#ef4444}
        .d05-07-09-row:nth-child(4) .d05-07-09-val{color:#f59e0b}