MarsVolta
Threadersteller
Dabei seit: 17.12.2007
Ort: Wuppertal
Alter: 36
Geschlecht:
|
Verfasst Di 16.09.2014 11:53
Titel CSS Animation: translate3d / translate |
|
|
Hallo,
ich habe mich seit einiger Zeit mit dem Thema CSS Animationen beschäftigt.
Dabei ist mir aufgefallen, dass verschiedene Browser verschieden reagieren - soweit nichts Neues!
Ich stelle mir jedoch global die Frage, welche Animationstechnik am sinnvollsten ist.
Angenommen ich möchte ein Objekt von A nach B bewegen lassen, infinite, also im loop - welche Methode wäre da die Sinnvollste?
Ich habe mich für diese entschieden:
Code: |
@keyframes waves {
from {transform: translateY(-8px);}
to {transform: translateY(0px);}
|
Mit dieser Variante sind die Animationen in allen Webkit-Browsern flüssig und laufen stabil mit hohen Framerates.
Auch die CPU Auslastung hält sich in Grenzen, da die Performance auf die GPU ausgelagert wird.
Nachteil: Diese Variante ruckelt im Firefox...
Wenn ich im Firefox jedoch diese Variante verwende:
Code: |
@keyframes waves {
from {bottom: -8px;}
to {bottom: 0px;}
}
|
... dann läuft es im Firefox um einiges flüssiger. Die CPU Auslastung ist jedoch bei translate als auch bei bottom gleich hoch!
Welcher Weg ist der sinnvollere?
Zuletzt bearbeitet von MarsVolta am Di 16.09.2014 11:54, insgesamt 1-mal bearbeitet
|
|