CSSアニメーションをJavaScriptで記述したら動きません

Question

下記CSSで実装されてる動作をJavaScriptで実現しようとしたところ動きません
エラーも出ておらずなぜかわかりません
詳しい方教えていただけないでしょうか

<style>
.bar{
  max-width: 600px;
  width: 100%;
  animation: bar-animation 1 2s;
  background: #0091EA;
}
.bar1{
  max-width: 70%;
}
@keyframes bar-animation{
  0%{
    width: 0px;
  }
  100%{
    width: 100%;
  }
}
</style>

<div class="graph">
<div class="bar bar1">A</div>
</div>

<style>
body,html{
  height:100%;
}
.bar{
  width: 100%;
  animation: bar-animation 1 2s;
  background: #0091EA;
}
@keyframes bar-animation{
  0%{
    width: 0%;
  }
  100%{
    width: 100%;
  }
}
</style>

<script>
window.onload=function(){
div=document.createElement("div");
div.style.width="100%";
div.style.height="10%";
document.body.append(div);

div2=document.createElement("div");
div2.style.maxWidth="70%";
div2.classList.add("bar");
div.appendChild(div2);
}
</script>

Answer 1

div2に高さの指定がないので、高さゼロになって見えない状態です。

Comments

[norikazux]

気付きませんでした
即レス回答ありがとうございました