html5 progress要素の背景色をアニメーション化する

Question

私はイメージアップローダーで作業しています。アップロード中に進捗要素の値を更新することに問題はありません。アップロードが終了した後、アニメーションで要素の背景色を変更したいと思います。私はjQueryで

私は要素に別のクラスを与え、：

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

そして、これが私の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; 
} 

私はここで間違ってやっているものを任意のアイデア？

Answer 1

CSSトランジションをお試しください。アニメーションには最適で、JSは必要ありません。

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

は、例をしたが、クラスを使用すると、色がアニメーションを経由して変更したい追加されると :hover代わりの .addClass()

https://jsfiddle.net/zk0Lg345/