CSS Animations

aus Wikipedia, der freien Enzyklopädie
Wechseln zu: Navigation, Suche

CSS Animations ist ein Modul für Cascading Style Sheets (CSS), das die Animation von XML-Elementen ermöglicht.

Geschichte[Bearbeiten]

Animationen auf Internetseiten auf Basis von CSS waren bis in die späten 2000er Jahre nicht möglich. Sie ließen sich nur durch clientseitige Skriptsprachen wie JavaScript implementieren. Im Jahre 2007 gaben WebKit-Entwickler bekannt, CSS-Animationen in Webkit-Browsern zu ermöglichen. Darüber hinaus wurde im Februar 2009 bekannt, dass sowohl implizite als auch explizite Animationen durch CSS ermöglicht werden sollen. CSS-Animationen sind ein Bestandteil von CSS3, einem derzeitigen Arbeitsentwurf des W3C.

Syntax[Bearbeiten]

Die Anwendung erfolgt in zwei Schritten. Zunächst wird eine Animation mit beliebig vielen Keyframes definiert. Später wird diese einem Selektor zugeordnet. Dabei können weitere Parameter wie Dauer der Animation oder Ablaufrichtung angegeben werden.

//Definition einer einfachen Keyframe-Animation
@keyframes fade-in {
  0% {opacity: 0}
  100% {opacity: 1}
}
 
//Anwendung
a {
  animation: fade-in 1s;
}

Browserunterstützung[Bearbeiten]

Seit Juni 2011 enthält Firefox 5 Unterstützung für CSS-Animationen.[1] CSS-Animationen sind außerdem seit 2007 in den Nightly Builds von WebKit, Google Chrome, Safari, Android 2.x und 3.x und dem RIM OS6-Webbrowser mit dem -webkit--Präfix als Modul verfügbar.[2][3] Der Internet Explorer ist ab Version 10 in der Lage, CSS-Animationen darzustellen.[4] Außerdem kann das Animationsmodul ab iTunes 9 genutzt werden, um Multimedia-Elemente von Musikdateien zu darzustellen.

Kritik[Bearbeiten]

Die Spezifikation von CSS-Animationen hat bei Befürwortern von JavaScript-Animationen oder, weniger ausgeprägt, SMIL-Animationen Besorgnis ausgelöst;[5] andere sehen darin einen Zug von Apple, dem Hauptsponsor des WebKit-Projektes, um der Einbindung von Adobe Flash (und den vorherrschenden Flash-Animationen) in die iOS-Produktlinie von Mobiltelefonen auszuweichen, welche den Webbrowser Safari verwenden.[6][7][8]

Quellen[Bearbeiten]

  1. Vorlage:Internetquelle/Wartung/Zugriffsdatum nicht im ISO-FormatFirefox 5 release notes. The Mozilla Foundation, 21. Juni 2011, abgerufen am 28. Oktober 2011.
  2. Vorlage:Internetquelle/Wartung/Zugriffsdatum nicht im ISO-FormatDave Hyatt: CSS Animation. Surfin’ Safari, 31. Oktober 2007, abgerufen am 28. Oktober 2011.
  3. Vorlage:Internetquelle/Wartung/Zugriffsdatum nicht im ISO-FormatDean Jackson: CSS Animation. Surfin’ Safari, 5. Februar 2009, abgerufen am 28. Oktober 2011.
  4. CSS Almanac: animation, abgerufen am 12. Juli 2013 (englisch)
  5. Vorlage:Internetquelle/Wartung/Zugriffsdatum nicht im ISO-FormatJonathan Snook: CSS Animations in Safari. Snook.ca, 31. Oktober 2007, abgerufen am 28. Oktober 2011.
  6. Vorlage:Internetquelle/Wartung/Zugriffsdatum nicht im ISO-FormatArnold Kim: CSS Animation Coming to Safari, Already in iPhone. Less Dependence on Flash? MacRumors.com, 6. Februar 2009, abgerufen am 28. Oktober 2011.
  7. Vorlage:Internetquelle/Wartung/Zugriffsdatum nicht im ISO-FormatRobert Palmer: CSS Animation to replace need for Flash in MobileSafari? Not likely. The Unofficial Apple Weblog, 6. Februar 2009, abgerufen am 28. Oktober 2011.
  8. Vorlage:Internetquelle/Wartung/Zugriffsdatum nicht im ISO-FormatVincent Ferrari: CSS Animations: A Flash Substitute? Apple Thoughts, 9. Februar 2009, abgerufen am 28. Oktober 2011.

Weblinks[Bearbeiten]