Internet Neuigkeiten — 23 April 2012
So arbeitet man mit CSS 3

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.

  1. (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.
  2. (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.
  3. (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.
  4. (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.
  5. (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.
  6. (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.
  7. (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.
  8. (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.
  9. (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.
  10. (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.

 

Related Articles

Share

About Author

Chris

Mein Name ist Christoph Arend ich bin Inhaber der jacor Werbeagentur und ich beschäftige mich schon über 10 Jahre intensiv mit dem Thema Design / Webdesign und Suchmaschinenoptimierung. Seit 2006 auch mit dem Bereich Online- und Social Media Marketing. In meinem Blog schreibe ich über aktuelle Themen aus den Bereichen Webdesign, SEO, Online Marketing und Social Media Marketing und versuche interessante Zahlen und Trends zu zeigen. Hier findest Du mich auf Google+

(0) Readers Comments

Hinterlasse eine Antwort

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind markiert *

Du kannst folgende HTML-Tags benutzen: <a href="" title="" rel=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>