CSS- KeyFrame이 잘못된 속성 값

Question

내가 여기서 직면하고있는 것이 확실하지 않지만 CSS 애니메이션을 적용하려고합니다.

일부 reseach를 수행 한 후 webkit 접두사를 추가하면 솔루션이 도움이 될 것이라고 생각했지만 유효하지 않은 속성 값을 읽는 중 여전히 문제가있는 것처럼 보입니다.

여기에 내 현재 코드입니다 :

.progress-status.complete { 
    width: 0%; 
    -webkit-animation: slideAll 2s ease-in-out infinite; 
    animation: slideAll 9s ease-in-out infinite; 
} 

@-webkit-keyframes slideAll { 
    from { 
     width: 0%; 
    } 

    to { 
     width: 100% 
    } 
} 

@keyframes slideAll { 
    from { 
     width: 0%; 
    } 

    to { 
     width: 100% 
    } 
} 

내가 웹팩를 통해이를 컴파일하고, 그래서 CSS 로더와 그 가능성이 문제가 있을까?

Answer 1

이전 브라우저로 작업하는 경우가 아니면 webkit 일이라고 생각하지 않습니다. 어리석은 것처럼 들릴지 모르겠지만 CSS의 어딘가에있는 요소에 배경과 높이를 추가하고 있습니까? 또 다른 한가지는 요소의 폭과 높이를 움직이는 것을 피하십시오. 그러면 레이아웃 리플 로우가 발생하여 페이지 속도가 느려집니다. 대신 너비 및 높이 조정에 scaleX 또는 scaleY을 사용하십시오.

작동하는 피들 : https://jsfiddle.net/5xjmkq4f/