I have an progress bar which i fill every step in my web app.

i have step one , step two and etc...

How can i create translateX animation the will be like the bar is get filled?

Now i have an fade animation that. i think it's the default of transition....

my css is this :

.progressbar li {
  list-style-type: none;
  width: 20%;
  float: right;
  font-size: 12px;
  position: relative;
  text-align: center;
  text-transform: uppercase;
  color: #7d7d7d;
}
.progressbar li:before {
  width: 22px;
  height: 22px;
  content: '';
  line-height: 30px;
  border: 2px solid #7d7d7d;
  background-color: #7d7d7d;
  display: block;
  text-align: center;
  margin: 0 auto 10px auto;
  border-radius: 50%;
  transition: all .8s;

}
.progressbar li:after {
  width: 100%;
  height: 7px;
  content: '';
  position: absolute;
  background-color: #7d7d7d;
  top: 7px;
  right: -50%;
  z-index: -1;
  transition: all .8s;
}
.progressbar li:first-child:after {
  content: none;
}

.progressbar li:first-child:before {
margin-top : 5px;
}
.progressbar li.active:before {
  border-color: #55b776;
  background-color: #55b776;
  transition: all .8s;
}
.progressbar li.active:after {
  background-color: #55b776;
  transition: all 0.3s ease-in;
}