Drücke die Tasten ◄ ► für weitere Artikel  

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

Mit CSS3-Animationen werden bewegte Bilder ganz ohne JavaScript oder weitere Plugins wie z.B. Adobe Flash unkompliziert im Browser 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 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:

49 Shares bis jetzt – Dankeschön!

Bewerten
VN:F [1.9.22_1171]
4 Antworten
  1. von Jens Grochtdreis am 12.04.2012 (10:22Uhr)

    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.

  2. von CSS3-Animationen: 10 nützliche Links zu… am 13.04.2012 (10:05Uhr)

    [...] CSS3-Animationen: 10 nützliche Links zu der Keyframe-Technik » t3n News. This entry was posted in Code and tagged CSS3, CSS3-Animation, Keyframe-Technik. Bookmark the [...]

  3. von Linkhub – Woche 15-2012 am 16.04.2012 (18:40Uhr)

    [...] CSS3-Animationen: 10 nützliche Links zu der Keyframe-Technik » t3n News [...]

  4. von Die Weihnachtsgeschichte in CSS3 » t3n am 11.02.2014 (14:12Uhr)

    […] Hier könnt ihr euch die Weihnachtsgeschichte in CSS3 ansehen: „The Story of Christmas“. Weitere Tipps zum Umgang mit CSS-Animationen gibt es hier. […]

Deine Meinung

Bitte melde dich an!

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

Jetzt anmelden

Mehr zum Thema CSS3
Mehr Performance für deine Website mit CSS3, dank Hardware-Acceleration
Mehr Performance für deine Website mit CSS3, dank Hardware-Acceleration

Wir zeigen euch, wie ihr die Hardware-Acceleration mit CSS3 aktivieren könnt um eure Web-Projekte, zum Beispiel auf Smartphones, schneller laufen zu lassen. » weiterlesen

Google-Maps-Alternative: Leaflet macht interaktive Karten zum Kinderspiel
Google-Maps-Alternative: Leaflet macht interaktive Karten zum Kinderspiel

Leaflet bietet dir eine Alternative zu Google Maps mit zahlreichen Funktionen für interaktive Karten und schränkt dich dabei nicht in der Wahl des Karten-Dienstes ein. Wir zeigen dir, wie du das... » weiterlesen

Hover.css: 50 Hover-Effekte für deine Webseite
Hover.css: 50 Hover-Effekte für deine Webseite

Hover.css bietet dir eine Sammlung von Hover-Effekten, die du auf verschiedene Elemente deiner Website anwenden kannst. Heute stellen wir dir diese kleine, aber feine CSS-Bibliothek kurz vor. » weiterlesen

Kennst Du schon unser t3n Magazin?

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