CSS3 Animation - The new Flash?

CSS3 Animation - The new Flash?CSS3 Animation - Die Diskussionen ob HTML5 das Ende von Flash bedeutet gibt es bereits seit geraumer Zeit. Und auch wenn HTML5 für die Strukturierung der Inhalte durch entsprechende HTML-Elemente zuständig ist, für den Großteil von Animationen im WorldWideWeb wird in Zukunft neben JavaScript auch CSS3 in Form des Modules Animation zuständig sein. Wobei nicht unerwähnt bleiben sollte, dass man sich die folgende kleine Liste an CSS3 Animationen, auch wenn der Mozilla Browser Firefox Fortschritte macht, in Bezug auf Browser-Unterstützung eher auf auf Google Chrome oder Safari (beide Webkit) ansehen sollte, wenn man in den Genuss der vollständigen Animation kommen möchte.

Modernes Webdesign mit CSS - Das neue Buch!

Die folgende kleine Übersicht an internationalen (Test-)Beispielen die sich eingehend mit der Eigenschaft Animation beschäftigen, soll einen Ausblick darauf ermöglichen was mit CSS3 möglich ist bzw. in Zukunft möglich sein wird, sofern die jeweiligen Browser (Anmerkung siehe oben) diese CSS3 Eigenschaft unterstützen.

CSS3 Animation Tutorials

Our Solar System
Our Solar System
Our Solar System

Star Wars - Animated AT-AT Walker
Pure CSS3 Animated AT-AT Walker
Pure CSS3 Animated AT-AT Walker from Star Wars

Animated 3D Super Mario Icon
Animated 3D Super Mario Icon
Pure CSS animated 3D Super Mario Icon

Bouncing Navigation
CSS3 Animation Tutorial - Bouncing Navigation without JavaScript
CSS3 Animation Tutorial - Bouncing Navigation without JavaScript

Anigma - Online Gaming
Anigma - Online Gaming
Anigma - Online Gaming using only CSS3

"Matrix" Animation
Matrix Animation
"Matrix" Animation based on CSS3

CSS3 Animation
CSS3 Animation
CSS 3 Animation? Yes Please!

Knight Rider animation
Knight Rider animation
Knight Rider animation

Ajax Style Loading Animation
Ajax Style Loading Animation
Ajax Style Loading Animation in CSS3 ( no Images )

Poster Cicle
Poster Cicle
Poster Cicle (only Safari)

Wer aktuell noch nicht in den vollständigen Genuss des letzten Beispiels kommen kann, erhält über das folgende Video einen Einblick darauf welche "Aufgaben" in Zukunft CSS3 übernehmen könnten. Damit wäre dann auch die Brücke zum Title dieses Beitrags "CSS3 Animation - The new Flash?" geschlagen. Wer sich von Euch an die Anfänge von Flash erinnert der weiß, dass auch die ersten Flash-Applikationen klein angefangen haben und sich viele der ersten Flash-Animationen nicht wesentlich von den hier aufgelisteten CSS3 Beispielen unterschieden haben.


CSS3 Animation - Poster Cicle

Wer weitere CSS3-Tutorials zu der Eigenschaft Animation kennt und diese mit anderen CSS3 interessierten Lesern teilen möchte, ist hiermit dazu aufgerufen den entsprechenden Link im Kommentarbereich zu kommunizieren, um somit diese Liste für weitere Leser ausbauen zu können.

Ähnliche Artikel zum Thema CSS3 Transition & Transforming:
  1. Mario 26 Jul 2010, 09:31

    Nette Sammlung, von der mir besonders das Super Mario Icon gut gefällt. CSS3 Animation kann man garantiert noch weiter auf die "Spitze" treiben und dann ist zumindest zu den Anfangszeiten von Flash kein gravierender Unterschied zu erkennen.


  2. Sven.ny 26 Jul 2010, 14:10

    Ich sehe das ähnlich wie Mario, wenn man die "Animationen" noch ein wenig mehr wie "Filme" anlegt, wird durch CSS3 Animation noch mehr möglich werden. Ich denke es ist nur eine Frage der Zeit, bis der erste reine CSS3 Movie das Licht der Welt erblickt!


  3. adocom
    26 Jul 2010, 16:16

    Schöne Sammlung.

    Warten wir gespannt auf den ersten CSS3 Film.

    adocom


  4. Valentin 30 Jul 2010, 22:08

    Falls HTML5 und CSS3 die gleichen Funktionen besitzen und gleich viel bzw. weniger Performance benötigen bin ich sofort für die Abschaffung von Flash. Leider ist das derzeit noch nicht möglich.

    Ein erster Schritt wäre, dass absolut kein Webentwickler mehr für IE6, IE7, etc. optimiert. Lediglich ein Hinweis man solle einen aktuellen Browser verwenden.


  5. BW
    04 Aug 2010, 14:56

    Ich bin ja nicht wirklich für Animationen. Das Problem ist, dass einerseits Suchmaschinen damit Probleme haben und dass Hilfsprogramme für Blinde dadurch Probleme haben. Am besten sollte man, wenn man unbedingt Animationen verwendet die wichtigsten Informationen auch in Textform unterbringen.


  6. webdesign 17 Aug 2010, 15:16

    Flash wird durch CSS3/HTML5 sicher stark verdrängt, behält aber weiterhin seine Daseinsberechtigungen. Allerdings kann ich es kaum mehr erwarten, wenn man Videos und kleine Animationen endlich ohne ein Flash und das benötigte Plug-In realisieren kann. CSS3 wird soo vieles leichter machen!


  7. CSS 3 rockt! 31 Jan 2011, 21:49

    Die Design-Möglichkeiten von CSS 3 sind wirklich traumhaft. Mit aktuellem Firefox oder Chrome kann man auf diesen Musik Blog ein weiteres Beispiel der praktischen Anwendung von CSS 3 sehen. Runde Ecken, Transparenzeffekte, Farbverläufe, Schatten, CSS3-Buttons. Besucher mit dem Internet Explorer bekommen eine abgespeckte Version. Wird wirklich Zeit, dass CSS 3 Browserübergreifend unterstützt wird.


Artikel kommentieren





HTML ist erlaubt und ausdrücklich erwünscht, wobei folgende Tags eingesetzt werden können: <a href="" title=""></a> <b></b> <cite></cite> <code></code> <em></em> <strong></strong>


authimage