CSS- KeyFrame ungültige Eigenschaft Wert

Nicht sicher, was ich hier vorstelle, aber ich versuche, CSS-Animation anzuwenden.CSS- KeyFrame ungültige Eigenschaft Wert

Nach einigen Recherchen, ich dachte, webkit Präfix wird die Lösung helfen, aber es sieht aus wie ich immer noch das Problem, wo es ungültige Eigenschaft Wert lesen.

Hier ist meine aktuellen Code:

.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% 
    } 
}

ich dies über Webpack bin kompilieren, so könnte dieser möglicherweise das Problem mit CSS-loader?

Quelle

2017-10-29 Alejandro

habe ich versucht, Ihr Beispiel und es funktionierte gut. Um zu überprüfen, ob Ihr HTML & CSS wie erwartet eingefügt wurde, öffnen Sie die Webseite mit den Entwicklertools und navigieren Sie zum * .progress-status.complete * -Element. Dinge zu überprüfen: dass Ihre Seite das gewünschte Element enthält, dass die Stile korrekt eingefügt werden, dass die Stile korrekt auf Ihr Element angewendet werden. Es könnte sehr wohl ein Problem mit der Webpack-Bündelung sein, wenn Sie es auch für Stile verwenden. Verwenden Sie einen Style-Loader? – guitarino

Ich glaube nicht, dass das eine webkit Sache ist, es sei denn, Sie arbeiten mit einem älteren Browser. Klingt vielleicht albern, aber bist du dir sicher, du fügst Hintergrund und Höhe zu diesem Element irgendwo in deinem CSS hinzu ?. Eine andere Sache, vermeiden Sie, Breite und Höhe der Elemente zu animieren, es verursacht Layoutreflow, der die Seite verlangsamt. Verwenden Sie stattdessen scaleX oder scaleY für die Breiten- und Höheneinstellung.

Arbeits Fiddle: https://jsfiddle.net/5xjmkq4f/

Quelle

2017-10-29 18:43:23 Swordys

CSS- KeyFrame ungültige Eigenschaft Wert

Antwort

Verwandte Themen