html5 진행 요소의 배경색에 애니메이션 적용

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/