Hello the problem is that you are changing the width (Width) of the progress tag, what you have to do is increase the value of the value attribute.

What you want is to achieve an effect like this using CSS only

.barra { 
    height: 20px;
	position: relative;
	background: #555;
	border-radius: 25px;
	padding: 10px;
}
.barra > span {
  display: block;
  height: 100%;
  border-top-right-radius: 8px;
  border-bottom-right-radius: 8px;
  border-top-left-radius: 20px;
  border-bottom-left-radius: 20px;
  background-color: #22AA11;
  position: relative;
  overflow: hidden;
  animation: prog 2s linear;
}
@keyframes prog {
  0% {width: 0%}
  100% {width: 100%}
}

<div class="barra">
  <span style="width: 25%"></span>
</div>

Only for academic purposes, and although I know it's not the answer you need, I noticed that given a progress element that is indeterminate (without value) you can animate the width of the pseudo-element ::-moz-progress-bar , but the webkit pseudo elements retain their initial style and ignore the animations. Neither the progress bar nor the progress value.

However, saying the above, these pseudo elements do support transitions. But as you may know, a transition occurs when an element undergoes a change of state as the addition of a class. (or a pseudo-class like: hover).

The following works in both Chrome and Firefox:

window.onload = function() {
  document.querySelector('#progreso').className = 'llenandose';
};

progress {
  width: 300px;
  border: 1px solid #ccc;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  background:none;
}


progress::-moz-progress-bar {
  background:#36c;
  width:0;
  transition: width 2s linear; 
}
progress::-webkit-progress-bar {
  background:#36c;
  width:0;
  transition: width 2s linear; 
}

.llenandose::-webkit-progress-bar {
  width:100%;
}
.llenandose::-moz-progress-bar {
  width:100%;
}

<progress id="progreso">Progreso</progress>

But we return to the two initial problems:

• This does not work in all browsers
• You are not manipulating the progress indicator according to the value of the element but with an arbitrary animation.

I do not really think there's a way to do it with pure CSS. The alternative would be to combine what you say Csharls with a bit of javascript to update the "pseudoprogress" according to the variation of the actual value of the bar, which would be hidden.

Edit

Forgive the gross ... I edited the code snippet to do an experiment and stepped on what I had done before. Now I reset it.