CSS Progress Tracker Не заполняется

Question

Я пытаюсь написать отслеживатель прогресса в SCSS, который будет заполняться в соответствии с шириной. Я знаю, что ширина передается, так как когда я проверяю элемент, он говорит о соответствующей ширине. Однако по какой-то причине анимация не работает.

SCSS является:

.checkout-bar 
    li.active:after { 
    @include green-stripe; 
    @include inner-shadow; 
    content:""; 
    height: 15px; 
    left: 16%; 
    float: left; 
    position: absolute; 
    top: -50px; 
    z-index: 0; 
    span.bar-animation { 
     -webkit-animation: myanimation 3s 0 forwards; 
    } 
    } 
    @-webkit-keyframes myanimation { 
    to { 
     width: 100%; 
    } 
    } 

HTML, является:

<div className="checkout-wrap"> 
    <ul className="checkout-bar"> 
    <li className="visited first">Received Message</li> 
    <li className="visited">Splitting Message</li> 
    <li className="visited">Publish on Call</li> 
    <li className="previous visited">Ready to Send</li> 
    <li className="active" style={{'width': percent + '%'}}>Sending Message 
     <span className="bar-animation">&nbsp;</span> 
    </li> 
    <li className="next">Done</li> 
    </ul> 
</div>; 

Спасибо заранее,

Answer 1

Вы только определили последний ключевой кадр. Для запуска анимации вам также необходимо определить аспект from {}. Я добавил немного JSFiddle ниже, чтобы показать, что я имею в виду.

.progress-bar { 
    background-color: red; 
    height:50px; 
    width: 0%; 
    animation-name: myanimation; 
    animation-duration: 4s; 
    } 
    @-webkit-keyframes myanimation { 
    from { 
    width:0%; 
    } 
    to { 
     width: 100%; 
    } 
    } 

https://jsfiddle.net/v4nbqznt/