CSS-Fortschritts-Tracker füllt sich nicht

Question

Ich versuche, einen Fortschrittstracker in SCSS zu schreiben, der entsprechend der Breite auffüllt. Ich weiß, dass die Breite übergeben wird, wenn ich das Element überprüfe, sagt es die entsprechende Breite. Aus irgendeinem Grund wird die Animation jedoch nicht ausgeführt.

Die SCSS ist:

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

Die HTML ist:

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

Vielen Dank im Voraus,

Answer 1

Sie definiert nur den letzten Keyframe. Damit die Animation ausgeführt werden kann, müssen Sie auch einen from {} Aspekt definieren. Ich habe unten ein kleines JSFiddle hinzugefügt, um zu zeigen, was ich meine.

.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/