求助，黑马3d波浪效果

想做一个10*10方格的渐变动画，但是div class =son那animation-delay不生成效果，而且也没有一行十个，子元素宽高不对

<script>
     let n=10;
    let w=400/n;

    //获取父亲
    let father = document.querySelector(".father");
    //设置内部结构
    let str ="";
    //通过空的字符串，每一次操作收集起来
    //js循环语法
    for (let j = 1; j <= 10; j++) {
      for (let i = 1; i <= 10; i++) {
            str +='<div class="son" style="width:${w}px;height:${w}px;animation-delay:${(i+j)*0.3}s;"></div>';
        }     
        //每一行创造4个div子元素 
    }
   father.innerHTML=str;

</script>