mediengestalter.info
FAQ :: Mitgliederliste :: MGi Team

Willkommen auf dem Portal für Mediengestalter

Aktuelles Datum und Uhrzeit: Fr 29.03.2024 09:35 Benutzername: Passwort: Auto-Login

Thema: CSS Animation: translate3d / translate vom 16.09.2014


Neues Thema eröffnen   Neue Antwort erstellen MGi Foren-Übersicht -> Programmierung -> CSS Animation: translate3d / translate
Autor Nachricht
MarsVolta
Threadersteller

Dabei seit: 17.12.2007
Ort: Wuppertal
Alter: 36
Geschlecht: Männlich
Verfasst Di 16.09.2014 11:53
Titel

CSS Animation: translate3d / translate

Antworten mit Zitat Zum Seitenanfang

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
  View user's profile Private Nachricht senden
SimonDerDude

Dabei seit: 15.01.2010
Ort: error: undefined
Alter: 35
Geschlecht: Männlich
Verfasst Di 16.09.2014 13:30
Titel

Antworten mit Zitat Zum Seitenanfang

Du könntest mit Präfixen Enginespezifische Verbesserungen ansetzen.
Wenn es mit bottom besser läuft, nutze diese Eigenschaft für -moz.
  View user's profile Private Nachricht senden Website dieses Benutzers besuchen
Anzeige
Anzeige
 
Ähnliche Themen Animation
Animation
Animation
Animation mit C4d??
Gif-Animation in PS CS3
3D-Animation
Neues Thema eröffnen   Neue Antwort erstellen
MGi Foren-Übersicht -> Programmierung


Du kannst keine Beiträge in dieses Forum schreiben.
Du kannst auf Beiträge in diesem Forum nicht antworten.
Du kannst an Umfragen in diesem Forum nicht mitmachen.