CSS Animations
CSS Animations ist ein Modul für Cascading Style Sheets (CSS), das die Animation von XML-Elementen ermöglicht.
Geschichte
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
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
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, Apple 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 darzustellen.
Kritik
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 Apple Safari verwenden.[6][7][8]
Quellen
- ↑ Firefox 5 release notes. The Mozilla Foundation, 21. Juni 2011, abgerufen am 28. Oktober 2011.
- ↑ Dave Hyatt: CSS Animation. Surfin’ Safari, 31. Oktober 2007, abgerufen am 28. Oktober 2011.
- ↑ Dean Jackson: CSS Animation. Surfin’ Safari, 5. Februar 2009, abgerufen am 28. Oktober 2011.
- ↑ CSS Almanac: animation, abgerufen am 12. Juli 2013 (englisch)
- ↑ Jonathan Snook: CSS Animations in Safari. Snook.ca, 31. Oktober 2007, abgerufen am 28. Oktober 2011.
- ↑ Arnold Kim: CSS Animation Coming to Safari, Already in iPhone. Less Dependence on Flash? MacRumors.com, 6. Februar 2009, abgerufen am 28. Oktober 2011.
- ↑ Robert Palmer: CSS Animation to replace need for Flash in MobileSafari? Not likely. The Unofficial Apple Weblog, 6. Februar 2009, abgerufen am 28. Oktober 2011.
- ↑ Vincent Ferrari: CSS Animations: A Flash Substitute? Apple Thoughts, 9. Februar 2009, abgerufen am 28. Oktober 2011.
Weblinks
- Initial Apple Proposal (Memento vom 30. April 2008 im Internet Archive)
- CSS Animations Module Level 3 draft on the W3C website
