How would i change the colour dynamically depending on the width

Question

OK so I have a bar that depending on the percentage set will fill to that set percentage.

However how could i change this the have a transition of the colour depending on the percentage.

For example 0% to 25% red the slowly turn green as approaches 100%

HTML

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

CSS

.progress {
    width:200px;
    height:50px;
    border:1px solid black;
    position:relative;
}
.progress:after {
    content:'\A';
    position:absolute;
    background:black;
    top:0; bottom:0;
    left:0; 
    width:90%;
    -webkit-animation: filler 2s ease-in-out;
    -moz-animation: filler 2s ease-in-out;
    animation: filler 2s ease-in-out;
}

@-webkit-keyframes filler {
    0% {
        width:0;
    }
}
@-moz-keyframes filler {
    0% {
        width:0;
    }
}
@keyframes filler {
    0% {
        width:0;
    }
}

any help on this will be fantastic, thanks you.

Answer 1

You could use linear-gradient here and animate :after pseudo-element to translate on X axis and gradually reveal parent element beneath with gradient.

Also animation-fill-mode: forwards is to keep :after to the right side once animation has finished.

.progress {
  width: 200px;
  height: 50px;
  border: 1px solid black;
  background: linear-gradient(to right, red 25%, green 100%);
  position: relative;
  overflow: hidden;
}
.progress:after {
  content: '\A';
 position: absolute;
  top: 0;
  bottom: 0;
  background: white;
  left: 0;
  width: 100%;
  -webkit-animation: filler 2s ease-in-out;
  -moz-animation: filler 2s ease-in-out;
  animation: filler 2s ease-in-out;
  animation-fill-mode: forwards;
}
@-webkit-keyframes filler {
  100% {
    transform: translateX(100%);
  }
}
@-moz-keyframes filler {
  100% {
    transform: translateX(100%);
  }
}
@keyframes filler {
  100% {
    transform: translateX(100%);
  }
}

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