CSS3 Transitions, Transforms und Animations

blinkende GIF-Grafiken stehen aber nicht mehr für moderne und professionelle

Animationen.

 

HTML5 und CSS3 haben vor allem mit dem Siegeszug der mobilen Geräte stark an Bedeutung gewonnen, Flash hingegen verloren. Heute spielen im Animationsbereich CSS3 und JavaScript eine bedeutende Rolle.

Die JavaScript-Bibliothek jQuery vereinfacht die Erstellung von Animationen und bieten den Vorteil, dass auch ältere Browser nicht ganz ausgeschlossen sind. CSS3 glänzt mit zwei Animationstypen: Übergangseffekte (Transitions) und komplexe Animationen über CSS3 Animation und @keyframes.

Der Internet-Explorer hinkt dabei etwas hinterher, versucht aber mit der Version 10 aufzuschließen.

CSS3 Transitions

CSS3 Transitions runden Websites durch kleine Effekte ab. Speziell für Mouseover-Effekte. Hierbei lassen sich z.B. fließende Veränderungen in einer vorgegebenen Zeit definieren.

CSS3 Transforms

Mit Hilfe von CSS3 Transforms kann man Elemente transformieren, diese rotieren lassen, skalieren, verzerren oder verschieben.

Animation und @keyframes

Zwei mächtige Befehle im Bereich der CSS3-Animationen, mit einer Menge Spielraum. Ähnlich wie bei Flash, lassen sich hierbei die Zeitpunkte festlegen wann eine Animation starten soll und wann sie beendet wird.

Man sollte allerdings beachten dass es sehr viele Update-träge Zielgruppen gibt, die immer noch veraltete Browser-Versionen nutzen, die diese Animationen nicht richtig darstellen. Wer seine Website für eine breite Zielgruppe haben möchte, sollte die Gestaltung nicht nur von CSS3-Animationen abhängig machen.

X

Express-Angebot anfordern

Hinterlassen Sie uns Ihre Kontaktdaten und wir beraten Sie gerne telefonisch oder per E-Mail.

Unsere Beratung ist:

  • unverbindlich
  • kostenlos
  • kompetent

Oder rufen Sie uns an
+49 (0) 231 / 969 800 10