Tengo una barra de progreso que lleno cada paso en mi aplicación web.

tengo el paso uno, el paso dos y etc...

¿Cómo puedo crear una animación de translateX, será como si la barra se llenara?

Ahora tengo una animación de desvanecimiento que. Creo que es el valor predeterminado de transición....

mi css es este:

 .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; }