[FRAGE] animate CSS, transition CSS

[timholz]

Hallo Zusammen

Für eine Animation benutze ich das Framework von ricostacruz.
Transit - CSS transitions and transformations for jQuery
Es erlaubt die den CSS animate auf transition zu wechseln. Alles sonst bleibt gleich.
Das Resultat sind aber viel geschmeidigere Animationen.
Ich hab es getestet und festgestellt, dass es für die meisten Browser zutrifft.
Leider nicht für Safari.

Hat jemand von euch bereits Erfahrung mit diesem Framework oder weiss jemand
warum Safari die Animation nicht so gut rendert wie die anderen?

Besten Dank für euer Interesse.

Mit freundlichen Grüssen
theo

 

[ToM80]

Es könnte sein, dass dies nur die Safari Version von Windows betrifft. Immerhin wird der Browser dort nicht mehr weiter entwickelt.

- - - Aktualisiert - - -

Gerade mal selbst getestet im Safari (Windows 7 64bit, Safari 5.1.7). Die Animationen sind ok, nur CSS wird nicht korrekt geladen

 

[timholz]

Hallo ToM80

War zwischenzeitlich beim Nachtmahl. Pizza...

Ich hab's auf meinem Mac Safari getestet.
Die Animation zittert leicht und ruckelt. Ist insgesamt viel unruhiger als in Firefox, Chrome und Operal.
Hier ist ein Artikel zum Thema: Safari Transition Flicker | kxdx dot org

Weiter habe ich noch folgende CSS Anweisungen ausprobiert:

.animelement {
	position: absolute;
	width: 0px;
	height: 0px;
	background-color: red;
	border-radius: 0.5em;
	border: .1em solid #505050;
	webkit-transform: rotateY(45deg);
 	transform: rotateY(45deg);
	-webkit-transform: translateZ(0);
	-webkit-backface-visibility: hidden;
}

Die letzten beiden wirken ein wenig beruhigend auf den Animationsfluss.
Aber nicht so flüssig wie in den anderen Browsern.

Vielleicht ist Safari so wie im erwähnten Artikel tatsächlich nicht so animationsfreundlich.

Ich habe noch einen weiteren Testvergleich gemacht: CSS 3D Solar System
Die Animation hat auf der rechten Seite ein paar Einstellmöglichkeiten. Wenn ich mit diesen ein wenig herumspiele und die Performance in verschiedenen Browsern teste,
dann fällt Safari deutlich ab. Vorallem bei schnellen und markanten Bewegungen. Die sind einfach viel flüssiger in den anderen Browsern.

Viele Grüsse
theo

 

[timholz]

Hallo

Das ist jetzt seltsam. Ich habe eine lange Antwort geschrieben und die ist einfach weg.
Also probier ich es nochmal.
Hier ist eine gute Seite um die Animation-Performance von verschiedenen Browsern zu testen:CSS 3D Solar System

Wenn ich auf den Einstellmöglichkeiten auf der rechten Seite ein wenig herumspiele, fällt mir auf, dass Safari bei schnellen markanten Bewegungen abfällt.
Die anderen Browser stellen die Animation viel sauberer dar.

Hier ist ein weiterer Artikel zum Thema:Safari Transition Flicker | kxdx dot org

Es scheint wirklich so, dass Safari nicht so animationsfreundlich ist.

Beste Grüsse
theo

 

[mikdoe]

*#3 freigeschaltet*

 

[timholz]

Danke für die Freischaltung.

Ich lade mal meine Demoanimation hoch.
Interessierte können sich dann ein besseres Bild über den Performance Abfall von Safari machen.

Danke für das Interesse.

Mit freundlichen Grüssen
theo