Suivi de progression CSS ne remplissant pas

Question

J'essaie d'écrire un suivi de progression dans SCSS qui se remplira en fonction de la largeur. Je sais que la largeur est passée, comme quand j'inspecte l'élément il indique la largeur appropriée. Cependant, pour une raison quelconque, l'animation ne fonctionne pas.

Le SCSS est:

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

Le code HTML est:

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

Merci à l'avance,

Answer 1

Vous ne définissaient la dernière image clé. Pour que l'animation fonctionne, vous devez également définir un aspect from {}. J'ai ajouté un petit JSFiddle ci-dessous pour montrer ce que je veux dire.

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