CSSプログレストラッカーがいっぱいになっていません

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/