Autor |
Nachricht |
Kash
Threadersteller
Dabei seit: 07.11.2002
Ort: Schopfheim
Alter: 41
Geschlecht:
|
Verfasst Fr 09.04.2010 16:45
Titel [TUT] - CSS3 Techniken Transform - Transition - Animate |
|
|
Hallo Zusammen,
ich habe Euch ein Tutorial / Infodokument zusammengestellt welches einen Überblick über einige neue CSS3 Techniken geben soll. Das wären in diesem Fall Transform, Transition und Animate.
Übersicht CSS3 Techniken Transform - Transition - Animation
Wer Lust und Interesse hat kann gerne in Zusammenarbeit mir mir dieses Dokument erweitern.
Es ist auch nicht gesagt das sich dieses Dokument unbedingt mit Transform, Transition und Animate beschäftigt. Gerne können wir das auf ebenso Interessante Funktionen erweitern.
Viel Spaß beim Ausprobieren.
|
|
|
|
|
Smooth-Graphics
Dabei seit: 22.05.2006
Ort: -
Alter: -
Geschlecht:
|
Verfasst Fr 09.04.2010 16:58
Titel
|
|
|
Ein paar Anmerkungen gleich mal:
Bei den Browserspezifischen Vorspannen fehlt -khtml- als Option für Konqueror und Konsorten.
Generell fehlen einige statistische Daten, die aufzeigen, welcher Browser was untersützt.
Zitat: | Diese Transformationen sind noch statisch und werden nicht animiert. Ebenso finden diese Transformierungen im zeidimensionellen Raum statt. | (Rechtschreibfehler)
Ansonsten eine schöne Zusammenfassung, wäre cool, wenn sie sich weiterentwickelt. Eventuell mach ich auch was weiter...
|
|
|
|
|
Anzeige
|
|
|
Kash
Threadersteller
Dabei seit: 07.11.2002
Ort: Schopfheim
Alter: 41
Geschlecht:
|
Verfasst Fr 09.04.2010 17:21
Titel
|
|
|
Smooth-Graphics hat geschrieben: | Ein paar Anmerkungen gleich mal:
Bei den Browserspezifischen Vorspannen fehlt -khtml- als Option für Konqueror und Konsorten.
Generell fehlen einige statistische Daten, die aufzeigen, welcher Browser was untersützt.
Zitat: | Diese Transformationen sind noch statisch und werden nicht animiert. Ebenso finden diese Transformierungen im zeidimensionellen Raum statt. | (Rechtschreibfehler)
|
Genau diesen Input habe ich gesucht. Egal ob es jetzt um Rechtschreibfehler geht oder ob statistische Daten fehlen.
Ich könnte mir vorstellen unter den jeweiligen Beispielen eine Auflistung ähnlich wie bei css4you unterzubringen.
Smooth-Graphics hat geschrieben: | Ansonsten eine schöne Zusammenfassung, wäre cool, wenn sie sich weiterentwickelt. Eventuell mach ich auch was weiter... |
Darum bitte ich
|
|
|
|
|
Vektorpate
Dabei seit: 05.09.2006
Ort: Hamburg
Alter: -
Geschlecht:
|
Verfasst Sa 10.04.2010 13:57
Titel
|
|
|
Coole Sache, danke für die Mühe
|
|
|
|
|
Smooth-Graphics
Dabei seit: 22.05.2006
Ort: -
Alter: -
Geschlecht:
|
Verfasst Sa 10.04.2010 15:21
Titel
|
|
|
Damits für jeden was ist:
#rotate:
- Firefox 3.6:
- Opera 10.5b: (?)
- Safari 4:
#scale:
- Firefox 3.6:
- Opera 10.5b: (?)
- Safari 4:
#translate:
- Firefox 3.6:
- Opera 10.5b:
- Safari 4:
Implementierung macht wenig Sinn im gecodeten Beispiel, weil der :hover Status logischerweise durch native Versetzung springt.
#scew:
- Firefox 3.6:
- Opera 10.5b:
- Safari 4:
#alles zusammen:
- Firefox 3.6:
- Opera 10.5b: hier wird plötzlich auch die rotate und scale möglich?!
- Safari 4:
#transitions #background-color:
- Firefox 3.6:
- Opera 10.5b:
- Safari 4:
#transitions #rotate:
- Firefox 3.6:
- Opera 10.5b:
- Safari 4:
Opera 10.10 unterstützt bisher nichts davon.
|
|
|
|
|
Kash
Threadersteller
Dabei seit: 07.11.2002
Ort: Schopfheim
Alter: 41
Geschlecht:
|
Verfasst Mo 12.04.2010 10:49
Titel
|
|
|
Vielen Dank für Deinen Beitrag Smooth-Graphics.
Ich werde es so schnell als Möglich in das Dokument übernehmen.
|
|
|
|
|
Smooth-Graphics
Dabei seit: 22.05.2006
Ort: -
Alter: -
Geschlecht:
|
Verfasst Di 11.05.2010 14:37
Titel
|
|
|
Hey,
wie sieht es denn aus, machst du weiter? Ich fände es schade, wenn es einfach so ins Nichts abtaucht.
|
|
|
|
|
Kash
Threadersteller
Dabei seit: 07.11.2002
Ort: Schopfheim
Alter: 41
Geschlecht:
|
Verfasst Di 11.05.2010 14:54
Titel
|
|
|
Smooth-Graphics hat geschrieben: | Hey,
wie sieht es denn aus, machst du weiter? Ich fände es schade, wenn es einfach so ins Nichts abtaucht. |
Hi, ja zur Zeit habe ich viel zu tun.
Aber für den Donnerstag hatte ich mir Zeit eingeplant. Ich wollte Deine Kompatibilitätsauflistung unterbringen, und ein Praxisbeispiel aufführen. Wozu ich nicht komme ist die Beschreibung zu Animation zu formulieren. Das W3C gibt wenig her. Und ich will nicht stupide Übersetzen.
Inwieweit kann es noch erweitert werden? Zusätzliche CSS3 Techniken?
Fällt Dir was ein?
Evtl kann @font-face mit aufgenommen werden.
|
|
|
|
|
|
|
|
Ähnliche Themen |
[CSS3] Problem: transition durch :hover 'hakt'
CSS-3 TRANSITION im IE
-moz-transition
CSS: Transform - blöde Schreibweise bei Chrome?
webkit-transform: scale - Ausgangspunkt festlegen
Div weicher öffnen per Transition
|
|