CSS3-Animationen sind eine der kommenden Möglichkeiten Animationen, kleine Videos und allgemein Bilder in Bewegung zu setzen. Hierbei ist jedoch weder JavaScript noch Adobe Flash notwendig. Wie das genau funktioniert zeigt ein Line25-Blogbeitrag, aus dem hier 10 interessante Seiten vorgestellt werden, die dem Interessierten helfen sollen seine Kreativität auch virtuell umzusetzen.
Der Durchbruch gelang CSS3 als Mitte letzten Jahres Firefox diese Anwendung ermöglichte. Zuvor war dies nur bei Chrome und Safari möglich. In absehbarer Zukunft werden auch der Internet-Explorer und Opera CSS3 unterstützen, womit die Massentauglichkeit gegeben sein sollte. Chris Spooner nutzte diesen Augenblick und stellt allen Interessierten die Schlüsselbild-Technik mit @keyframes in seinem Line25-Blog vor. Ich biete euch eine kleine Kostprobe, indem ich euch 10 Links kurz aufzeige.
- (http://www.w3schools.com/css3/css3_animations.asp) CSS3-Animations bei W3-Schools. Hier werden die Grundzüge und ersten Schritte der @keyframe Animation erklärt, und durch Beispiele und Aufführung diverser Eigenschaften veranschaulicht.
- (http://css-tricks.com/snippets/css/webkit-keyframe-animation-syntax/) Keyframe Animation Syntax bei CSS-Tricks. Für den fortgeschrittenen CSS3-Anwender geeignet werden hier verschiedene Deklarationen und Code-Snippets erklärt.
- (http://css3.bradshawenterprises.com/animations/) CSS3-Animations von Richard Bradshaw. Hier werden dem Leser diverse Aspekte und Tipps, inklusive Transition und Fransform der CSS3-Animationen näher gebracht.
- (http://coding.smashingmagazine.com/2011/09/14/the-guide-to-css-animation-principles-and-examples/) The Guide to CSS Animation von Smashing Magazine. Will man seine Animation mit beeindruckenden Effekten hinterlegen, so erklärt dieser Beitrag die Verknüpfung bekannter Bewegungsbildmechanismen und die Anwendung bei CSS3.
- (http://www.netmagazine.com/tutorials/masterclass-css-animations) A master class in CSS animations von Netmagazine. Ein breit gefächerter Artikel, welcher sowohl Grundlagen als auch ausgeklügelte Tipps zu Keyframes bietet.
- (http://www.leemunroe.com/css3-animations/) Start Experimenting with CSS3 Keyframe Animations von Lee Munroe. Dieser Artikel aus dem Jahre 2010 beschreibt die Anfänge von CSS3 und ihre Anwendung anschaulich mit Code-Beispielen. Zum Schluss werden weitere Seiten empfohlen um sich mit dem Thema zu vertiefen.
- (http://inspectelement.com/tutorials/ring-a-bell-with-css-keyframe-animations/) Ring a Bell with CSS Keyframe Animations von Inspect Element. An einem einfachen Beispiel kann man lernen, wie die prinzipielle Arbeit mit CSS3 funktioniert.
- (http://line25.com/articles/useful-links-for-learning-css-keyframes-animation) Having Fun with CSS Animations von Samuli Hakoniemi. Eine gute Einführung in die @keyframe Regel, originell aufgezogen und interessant gestaltet, ideal um die eigene Internetpräsents aufzuwerten.
- (http://www.ubelly.com/2012/01/the-five-minute-guide-to-css-animations/) The 5-Minute Guide to CSS-Animations von Ubelly. Im Internet Explorer v.10 wird CSS3 zur Anwendung kommen. Dieser Artikel zeigt den Umgang von CSS3 in diesem Medium.
- (http://line25.com/articles/useful-links-for-learning-css-keyframes-animation) von Van SEO Design. Ein ausführlicher Artikel zu allem wichtiger von Keyframes und Eigenschaften der CSS3-Animationen, erklärt mit guten Beispielen und Erklärungen.







Social Networks