Hintergrundfarbe des html5 Fortschrittselements animieren

Question

Ich arbeite an einem Bild-Uploader. Ich habe keine Probleme mit der Aktualisierung des Fortschrittselementwerts während des Uploads. Nach dem Hochladen möchte ich die Hintergrundfarbe des Elements mit einer Animation ändern.

In meinem jQuery gebe ich dem Element eine andere Klasse und:

$(newImageElement).find('.list-item__image-holder 
.progressBar').addClass('progressBar-green'); 

Und das ist mein CSS:

.list-item__image-holder .progressBar-green[value]::-webkit-progress-value { 
-webkit-animation: progressBarAnimation 3s ease-in; 
animation: progressBarAnimation 3s ease-in; 
} 


@keyframes progressBarAnimation { 
    0% { 
     background-color: #f96332; 
    } 
    100% { 
     background-color: #5cb860; 
} 

Jede Idee, was ich hier falsch mache?

Answer 1

Versuchen Sie es mit CSS-Übergängen. Funktioniert hervorragend für Animationen und kein JS erforderlich.

https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Transitions/Using_CSS_transitions

.list-item__image-holder .progressBar { 
    background-color: #f96332; 
    transition: background-color ease-in 1s; 
} 

.list-item__image-holder .progressBar.progressBar-green { 
    background-color: #5cb860; 
} 

ein Beispiel gemacht, aber verwendet :hover statt .addClass()

https://jsfiddle.net/zk0Lg345/