Bild verwischt während CSS Übergang und ist janky

Hallo Ich lerne einige Hover-Effekte zu erstellen und zu verwalten abziehen, was ich mir mit dieser Animation hatte: http://jsbin.com/xawibo/Bild verwischt während CSS Übergang und ist janky

Die CSS, die das Bild belebt, ist dies:

Aber die Animation ist nicht glatt. Das Miniaturbild wird während des Übergangs verschwommen und wird erst wieder scharf, wenn der Übergang stoppt. Es gibt auch eine leichte links/rechts ruckartige Bewegung.

Hier ist eine schnelle Youtube Video von dem, was ich sehe:

https://www.youtube.com/watch?v=yoIgV1ORbN8&feature=youtu.be

Was ich, dass wirkt sich die perforamce dieser Animation mache? Soll ich zu viele DIVs nisten?

Quelle

2016-07-30 codemon

Ich glaube nicht, dass es eine Möglichkeit, um die Bildunschärfe - während des Übergangs wird verwischt das Bild, das ist die Art von Animieren Bildern. Ich würde sagen, das ist etwas, was der Entwickler viel mehr bemerkt als der Benutzer - für mich sah diese Animation beim ersten Mal gut aus, ich hatte zweimal die Aussicht, um das Problem zu sehen. – Toby

Sie sehen in Chrome? Ich habe vergessen zu erwähnen, dass ich das in Chrome bemerke und andere ATM-Browser nicht testen kann. – codemon

Ja, Chrom auf einem Mac – Toby

Scheint wie Chrome-spezifisches Problem.

Statt transform:scale() können Sie width animieren:

.caption:hover > span img{ 
    background: rgba(0, 158, 205, 0.45); 
    transform: translate(0,10%) ; 
    width:100%; 
}

Quelle

2016-07-30 01:05:03

Danke! Ich habe es versucht und es funktioniert viel besser! Allerdings gibt es immer noch einen leichten Schub nach rechts – codemon

Dies passiert bei Chrome auf Windows anscheinend.

scheint sehr ähnlich zu dem Thema hier dargestellt: CSS transition effect makes image blurry/moves image 1px, in Chrome?

Was, wenn -webkit-transform: [...] zusammen mit transform: [...] Verwendung geschieht?

Quelle

2016-07-30 00:58:10 codeSwim

Vielen Dank Ich habe versucht, das Update von dieser anderen SO Frage, aber nichts passiert ist. Und ich habe gerade versucht mit -webkit- keine Würfel. Ich bin auf Windows 10. Ich habe ein Video von dem, was ich im ursprünglichen Beitrag sehe, hinzugefügt. – codemon

Ich schaute auf das Video, es ist sehr ähnlich zu dem, was ich auf Chrome bekomme, sowohl unter Windows7 und Windows10. – codeSwim

Bild verwischt während CSS Übergang und ist janky

Antwort

Verwandte Themen