Vorheriger Artikel Nächster Artikel

CSS3-Animationen: 10 nützliche Links zu der Keyframe-Technik

Mit CSS3-Animationen werden bewegte Bilder ganz ohne oder weitere wie z.B. Adobe Flash unkompliziert im möglich. Wie diese Schlüsselbild-Technik über @keyframes nur mit Hilfe von Cascading Stylesheets funktioniert, wird anschaulich in 10 Artikeln samt Beispielen und Demos erklärt, die wir in einem Line25-Blogpost gefunden haben. Wir stellen euch die 10 hilfreichen Links zu CSS3-Animationen kurz vor.

CSS3-Animationen: 10 nützliche Links zu der Keyframe-Technik
Browserunterstützung für CSS3-Animationen mit @keyframe

Bewegte Bilder mit CSS3-Animationen

Bislang hatten Animationen mit und @keyframes eher experimentellen Charakter, da sie bis Mitte 2011 nur von Webkit-Browsern wie Safari oder Chrome unterstützt wurden. Seit Juni 2011 ist der Firefox ab Version 5 mit an Bord. Die nächste Version 10 des Internet Explorers und Version 12 von Opera sollen ebenfalls für die CSS3-Keyframe-Animationen gerüstet sein. Also ein guter Zeitpunkt, wie Chris Spooner in seinem Line25-Blogartikel anmerkt, sich etwas genauer anzuschauen, wie man die Schlüsselbild-Technik über @keyframes in CSS3 nutzt. Wir fassen 10 nützliche Links zu bewegten Bildern mit CSS3 für Einsteiger und Fortgeschrittene kurz für euch zusammen.

1 Grundlagen der CSS3-Animation – W3 Schools

W3 Schools bietet einen Überblick zu ersten Grundlagen der CSS3 @keyframe Animation und den zahlreichen verfügbaren Eigenschaften mit Beispielen zum Ausprobieren.

CSS3-Animations - W3 Schools

2 Cheat-Sheet mit Code-Snippets zu CSS3-Animationen – CSS-Tricks

Wer bereits damit vertraut ist, wie CSS3-Animationen grundlegend funktionieren, findet bei CSS-Tricks einen Kurzüberblick zu wichtigsten Deklarationen als Reminder und nützliche Code-Snippets.

Keyframe Animation Syntax - CSS-Tricks

3  Wertvolle Tipps und Browserunterstützung – Richard Bradshaw

Richard hat auf seiner Seite einige wertvolle Tipps zu verschiedenen Aspekten von CSS3-Animationen gesammelt. Auch zu Transitions und Transforms findet man bei ihm gute Beiträge.

CSS3-Animations – Richard Bradshaw

4 Traditionelle Animationsprinzipien und CSS3 – Smashing Magazine

Dieser ausführliche Artikel zu althergebrachten Bewegtbildmechanismen und ihrer Anwendung bei CSS3-Animationen hilft dabei, überzeugendere Effekte zu erstellen.

The Guide To CSS Animation: Principles and Examples – Smashing Magazine

5 Animationselemente und -eigenschaften in CSS3  - Netmagazine

In diesem Tutorial findet ihr sowohl Grundlagen zu Keyframes als auch ausführliche Expertentipps mit Beipspielen zu Animationselementen und -eigenschaften.

A masterclass in CSS animations – Netmagazine

6  Basics zu CSS3-Animationen und schicke Beispiele – Lee Munroe

Der Blogpost von Lee Munroe von 2010 war ursprünglich auf Webkit beschränkt, aber die grundlegende Syntax ist die gleiche. Er beschreibt das Einbinden von CSS3-Keyframe-Animationen mit Code-Beispielen und listet am Ende 5 Websites mit weiteren schicken CSS3-Animationen in Aktion auf.

Start Experimenting With CSS3 Keyframe Animations – Lee Munroe

7 Mit CSS3-Eigenschaften zu einer realistischen Animation – Inspect Element

Auch wenn es nach einem einfachen Anfängerbeispiel aussieht, zeigt das Tutorial zu einer Keyframe-Animation mit CSS3 bei Inspect Elements, wie man unter Verwendung zahlreicher Eigenschaften eine realistisch läutende Glocke hin bekommt.

Ring a Bell with CSS Keyframe Animations – Inspect Element

8 Einfache Charakter-Animation mit CSS3 - Samuli Hakoniemi

Samuli Haoniemi zeigt in seinem Tutorial, wie man mit Hilfe der @keyframe Regel eine einfache aber effektive Charakter-Animation erstellt. Samulis Beispiel ist eine gute Abwechslung zu den üblichen Beispielen mit sich bewegenden Rechtecken und springenden Bällen, aus der man kreative Ideen für die eigene Website entwickeln kann.

Having Fun With CSS Animations – Samuli Hakoniemi

9 Grundlagen in 5 Minuten und CSS-Animation im IE 10

Dieser Artikel bei Ubelly stellt die Unterstützung von CSS3-Animationen im Internet Explorer in Version 10 vor und bietet einen kurzen Überblick in 5 Minuten zu grundlegenden Begriffen.

The Five-Minute Guide to CSS Animations – Ubelly

10 Eigenschaften und Regeln von CSS3-Animationen mit Beispielen - Van SEO Design

Van SEO Design gibt in seinem Artikel einen Überblick zu Keyframes und den zahlreichen Eigenschaften von CSS3-Animationen mit ausführlichen Beschreibungen und Code-Beispielen.

Animation With CSS: It’s Easier Than You Think – Van SEO Design

Setzt ihr CSS3-Animationen mit Keyframes schon ein auf euren Websites? Oder kennt ihr noch weitere nützliche Tutorials und Beispiele zu bewegten Bildern nur mit CSS3?

Weiterführende Links:

Vorheriger Artikel Zurück zur Startseite Nächster Artikel
Eine Antwort
  1. von Jens Grochtdreis am 12.04.2012 (10:22 Uhr)

    Es wird ja immer besser bei Euch. Einfach mal einen Artikel aus einem englischen Blog übersetzen. Das ist ja mal einfach.
    Übrigens: bitte niemals auf W3Schools verlinken. Die Seite ist großer Mist. Warum das so ist kann man auf W3Fools nachlesen. Bei Mozilla gibt es gute Infos über die prinzipielle Schreibweise.

    Antworten Teilen
Deine Meinung

Bitte melde dich an!

Du musst angemeldet sein, um einen Kommentar schreiben zu können.

Jetzt anmelden

Mehr zum Thema CSS3
Inspiration: CSS-Ladebalken und -Animationen für dein Projekt
Inspiration: CSS-Ladebalken und -Animationen für dein Projekt

Zur Darstellung von Ladezuständen könnten ein einfaches „Lade“ oder eine Gif-Animation mit einem Ladebalken ausreichen. Mit CSS3 stehen aber weitere, optisch ansprechendere und … » weiterlesen

Tolle JavaScript-Datenbank: Die besten Libraries, Frameworks und Plugins im Überblick
Tolle JavaScript-Datenbank: Die besten Libraries, Frameworks und Plugins im Überblick

JSDB.io fungiert als Datenbank der besten JavaScript-Libraries im Netz. Dank sinnvoller Unterkategorien findet ihr hier schnell, wonach ihr sucht. » weiterlesen

Modular und hackbar: Wie du den Open-Source-Browser Breach individuell anpassen kannst
Modular und hackbar: Wie du den Open-Source-Browser Breach individuell anpassen kannst

Mit Breach gibt es einen neuen Open-Source-Browser, dessen Oberfläche vollständig in JavaScript geschrieben wurde. Dank der modularen Natur des Browsers soll sich das Interface per JavaScript und … » weiterlesen

Kennst Du schon unser t3n Magazin?

t3n 37 jetzt kostenfrei probelesen! Alle Inhalte des t3n Magazins Diesen Hinweis verbergen