html - css によるアニメーション プログレス バー

Question

プログレスバーが 2 秒で 0% 幅から 50% 幅に移動するようにします。これまでの私のコードは次のとおりです。

<style>  
  #progressbar {
      background-color: #000000;
      border-radius: 8px;
      padding: 3px;
      width: 400px;
    }

    #progressbar div {
       background-color: #0063C6;
       height: 10px;
       border-radius: 5px;
       animation:loadbar 2s;
        -webkit-animation:loadbar 2s;
    }

    @keyframes loadbar {

    0% {
        width: 0%;
    }

    100% {
        width: 50%;
    }

    @-webkit-keyframes loadbar {

    0% {
        width: 0%;
    }

    100% {
        width: 50%;
    }

}
</style>

<div id="progressbar">
    <div></div>
</div>

しかし、ページを開くと、幅が 50% ではなく 100% になっています。私は何を間違えましたか？

Answer 1

ここにフィドルがあります

#progressbar div {
   background-color: #0063C6;
   width: 50%;
   height: 10px;
   border-radius: 5px;
   animation:loadbar 2s;
   -webkit-animation:loadbar 2s;
}

@keyframes loadbar {

  0% {
    width: 0%;
  }

  100% {
    width: 50%;
  }
}
@-webkit-keyframes loadbar {

  0% {
    width: 0%;
  }

  100% {
    width: 50%;
  }

}