ヒートマップ描画アニメ

<div class="d05-07-04 io-reveal">
          <p class="d05-07-04-title">曜日 × 時間帯 アクセス密度</p>
          <div class="d05-07-04-grid"></div>
        </div>

.d05-07-04{width:100%}
        .d05-07-04-title{margin:0 0 10px;font-size:11px;color:#6b7280;text-align:center}
        .d05-07-04-grid{display:grid;grid-template-columns:repeat(7,1fr);gap:4px}
        .d05-07-04-cell{aspect-ratio:1;border-radius:3px;opacity:0;transform:scale(.5)}
        .d05-07-04.is-in .d05-07-04-cell{animation:d05-07-04-in .4s ease forwards;animation-delay:calc(var(--i) * .04s)}
        @keyframes d05-07-04-in{to{opacity:1;transform:scale(1)}}
        .d05-07-04-l1{background:#e0f2fe}
        .d05-07-04-l2{background:#7dd3fc}
        .d05-07-04-l3{background:#38bdf8}
        .d05-07-04-l4{background:#0284c7}
        .d05-07-04-l5{background:#075985}

(function(){
          var root = document.getElementById('item-05-07-04');
          if(!root) return;
          var grid = root.querySelector('.d05-07-04-grid');
          for(var i=0;i<28;i++){
            var lv = (i*7+3) % 5 + 1;
            var cell = document.createElement('div');
            cell.className = 'd05-07-04-cell d05-07-04-l' + lv;
            cell.style.setProperty('--i', i);
            grid.appendChild(cell);
          }
        })();