CSS- KeyFrameが無効なプロパティ値

Question

ここで私が直面していることはわかりませんが、CSSアニメーションを適用しようとしています。

いくつかの調査を行った後、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% 
    } 
} 

私はWebPACKのを経由して、これをコンパイルしていますので、CSS-ローダーとその可能性の問題だろうか？

Answer 1

旧式のブラウザで作業している場合を除き、それはwebkitとは思えません。あなたは愚かに聞こえるかもしれませんが、確かですか？CSSのどこかにその要素に背景と高さを追加していますか？もう一つは、要素の幅と高さをアニメーション化しないようにします。レイアウトのリフローを引き起こし、ページの速度を落とします。代わりに、幅と高さの調整にはscaleXまたはscaleYを使用します。

作業フィールド：https://jsfiddle.net/5xjmkq4f/