CSS Animations lag in allen Browsern außer Edge

Hey,

bei meinen Experimenten mit CSS Animations ist mir aufgefallen, dass dieses Beispiel: https://jsfiddle.net/30z5ovxe/9/ nur unter MS Edge nicht laggt, also keine "Schritte" zu sehen sind. Ich gehe davon aus, dass dies mit dem Antialiasing zu tun hat. Wie kann ich das bei den anderen Browsern "aktivieren"?

Die Tricks mit 1px transparent outline und Hardwarebeschleunigung (rotate3d z.B.) hab ich auch schon ausproibiert...

Hat da jemand Erfahrung?

Lg, Franz

Edit: Hm, ok, bin selber drauf gekommen... Wenn man transforms statt den normalen Werten verwendet, läuft das ganze smooth ^^ Das sähe dann so aus: https://jsfiddle.net/30z5ovxe/12/

Aber interessant, das Edge eine (bessere?) Umsetzung für sowas zu haben scheint...

Hi,
versuche doch mal in den keyframes statt left und top mit transform:translate(length, percentage); zu arbeiten.
Läuft im Chrome z.B. wesentlich flüssiger.

z.B.:
@keyframes bganimation {
from {transform:translate(0,0); width: 100%; height: 100%;}
to {transform:translate(-10%,-10%); width: 120%; height: 120%;}
}
@keyframes bganimation2 {
from {transform:translate(10%,10%); width: 10%; height: 10%;}
to {transform:translate(1%,1%); width: 15%; height: 15%;}
}

Sry, hatte die Seite nicht mehr aktualisiert bevor ich editiert hab

Genau dasselbe hab ich jetzt ja auch gmacht

Danke!