animate progress bar

Question

I have this progress bar and need to send via javascript :

document.querySelector('#progress').style.width = 10%;

the value for the css animate :

@-moz-keyframes progress { 
    from { }

    to { width: 80% }
}

but I can’t change the value ...

document.querySelector('#progress').style.width = 10%; 

#progress {
    background: #A1C969; /*-- Color of the bar --*/
    height: 15px;
    width: 0%;
    max-width: 100%;
    float: left;
    -webkit-animation: progress 2s 1 forwards;
    -moz-animation: progress 2s 1 forwards;
    -ms-animation: progress 2s 1 forwards;
    animation: progress 2s 1 forwards;
}

#pbaranim {
    height: 15px;
    width: 100%;
    overflow: hidden;
    background: url('http://www.cssdeck.com/uploads/media/items/7/7uo1osj.gif') repeat-x;
    -moz-opacity: 0.25;
    -khtml-opacity: 0.25;
    opacity: 0.25;
    -ms-filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=25);
    filter: progid:DXImageTransform.Microsoft.Alpha(opacity=25);
    filter: alpha(opacity=25);
}

@-webkit-keyframes progress { 
    from { }

    to { width: 80% }
}

@-moz-keyframes progress { 
    from { }

    to { width: 80% }
}

@-ms-keyframes progress { 
    from { }

    to { width: 80% }
}

@keyframes progress { 
    from { }

    to { width: 36% }
}

<div id="progressbar" style="width:100%; height:50px; border:1px solid gray;">
  <div id="progress" style="width:0%; 
       background:red;
       height:20px;">
  </div>
</div>

Answer 1

if you need to manually modify the bar value, then I advise you to use transition instead of animation:

var valor = document.querySelector(".valor");
window.setTimeout(function () {
  valor.style.width = "80%";
  
  window.setTimeout(function () {
    valor.style.width = "10%";
  }, 2000);
}, 50);

.progress {
  position: fixed;
  top: 0px;
  right: 0px;
  bottom: 0px;
  left: 0px;
  margin: auto;
  height: 50px;
  width: 360px;
  padding: 5px;
  border: 5px solid gainsboro;
  box-shadow: inset 0px 0px 5px black, 0px 0px 5px black;
  box-sizing: border-box;
}

.valor {
  height: 100%; 
  width: 0%;
  transition: width 1s linear;  
  background-color: steelblue;
}

<div class="progress">
  <div class="valor">
  </div>
</div>