Ich habe eine Schaltfläche Speichern, die Impulse, wenn das Formular gespeichert werden muss.CSS-Skala Animation ruckelt in Chrome

CSS:

@keyframes pulse-scale { 
    from { transform: scale(1); } 
    to { transform: scale(1.1); } 
} 
.btn-alert { 
    animation: 1s pulse-scale ease-out infinite alternate; 
}

HTML:

<button class="btn btn-round btn-alert"> 
    <i class="fa fa-check"></i> 
</button>

Das Problem ist, dass es schlecht in Chrome spielt 49. Ich bin sicher, dass es verwendet in Ordnung zu sein, aber jetzt als skaliert sie es scheint um bestimmte Pixel-ausgerichtete Skalen einzufangen und zwischen unscharf und scharf zu wechseln, was zu einer "ruckartigen" Animation führt. ~~Es scheint in Firefox 38~~ in Ordnung zu sein. In Firefox 38 spielt es anfänglich gut, aber nach dem Warten auf eine Weile (?) Oder dem Wechseln zu einem anderen Fenster und zurück spielt es auch schlecht.

Um klar zu sein, ist dies ein Bild-Sampling (Qualität) -Problem, kein Bildrate (Geschwindigkeit) Problem. Hier ist ein Video, wie es aussieht. Von links nach rechts: Firefox, Firefox nach ein paar Minuten, Chrome. Nur die linke Seite spielt korrekt.

Gibt es eine CSS-Eigenschaft ich einstellen kann, um es besser machen spielen - zum Beispiel erzwingen, einen anderen Interpolationsmodus zu verwenden? Ich habe versucht adding translateZ(0) zu den Keyframes, aber es scheint nicht zu helfen.

Demo in JSFiddle

Quelle

2016-05-09 z0r

haben Sie versucht, mit @ -webkit- zu? –

@AdnanAkram Ich habe es mit '-webkit-transform' und' -webkit-animation' versucht - meinst du das? Aber nach Dev-Tools werden diese Eigenschaften von meinem Browser ignoriert (ersetzt durch 'transform' und' animation'). – z0r

Sieht mich das nicht ruckartig an? Ich bin jedoch in Chrome 50. Was meinst du mit "ruckartig"? Haben Sie auch versucht, mit 'easy-out' herumzuspielen und einige der anderen Einstellungen auszuprobieren? Warum verwenden Sie auch 'animation', wenn Sie' transition' verwenden können? – aug

Es scheint dieser Fehler etwas mit Chrome 49 zu tun hat und festgelegt ist, wenn Sie Chrome aktualisieren 50.

Quelle

2016-05-09 05:04:45

Danke, aber diese Änderungen beheben das Problem nicht. Es ist kein Problem mit der Bildrate - ich denke, es ist ein Problem der Bildaufnahme. Ich werde die Frage aktualisieren, um das zu sagen. – z0r

Welche Art von Bild ist das? Wenn möglich, können Sie versuchen, ein vektorbasiertes Bild zu verwenden? –

Es ist kein Rasterbild - es ist ein "Knopf" mit abgerundeten Ecken, der eine [Vektorschriftart] anzeigt (https://fortawesome.github.io/Font-Awesome/). Das gleiche Problem tritt auf, wenn die Schaltfläche Nur-Text enthält. – z0r

CSS-Skala Animation ruckelt in Chrome

Demo in JSFiddle

Antwort

Verwandte Themen