CSS translate Animation verschwommen für verzerrten Text mit Deckkraft <1

Question

Ich weiß, dass es viele Themen gibt, die die Unschärfe durch CSS-Animationen betreffen, aber ich bin anscheinend auf einen ziemlich einzigartigen Anwendungsfall gestoßen, in dem ich jede Lösung einfach gefunden habe funktioniert nicht.

machte ich einen codepen eine minimalistische Einrichtung meiner genauen Ausgabe zeigt:

Codepen

Grundsätzlich habe ich eine div mit Opazität 0.95, die um 10 Grad gedreht ist, und innere Inhalt dessen verzerrt durch - 10 Grad (so dass es aufrecht erscheint). Innerhalb dieses Inhalts befindet sich unten ein Absatz. Wenn Sie den Mauszeiger darüber bewegen, wird eine Animation des Absatzes ausgelöst, der nach rechts verschoben wird. Leider wird dadurch der gesamte Text auf der Seite unscharf.

Beachten Sie, dass das Entfernen der beiden Skew-Transformationen oder der Opazitätseinstellung dazu führt, dass der Text nicht mehr unscharf wird.

Answer 1

Dies wird wahrscheinlich durch die skew und die umgekehrte skew verursacht, die den Browser zwingen, den Prozess zu beschleunigen. Aber Sie müssen dieses Ergebnis nicht gelten zwei skews zu bekommen, können Sie auch eine Verwendung gradient background

background:linear-gradient(170deg, rgba(0,0,0,0) 0%,rgba(0,0,0,0) 164px, #a3d5d3 163px, #a3d5d3 calc(100% - 165px), rgba(0,0,0,0) calc(100% - 165px), rgba(0,0,0,0) 100%);