imported>SchlurcherBot: Bot: http → https

2026-02-10T12:42:43Z

Bot: http → https

Neue Seite

'''CSS Animations''' ist ein Modul für [[Cascading Style Sheets]] (CSS), das die Animation von [[Extensible Markup Language|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 [[World Wide Web Consortium|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.
<syntaxhighlight lang="css">
/*Definition einer einfachen Keyframe-Animation*/
@keyframes fade-in {
0% {opacity: 0}
100% {opacity: 1}
}

/*Anwendung*/
a {
animation: fade-in 1s;
}
</syntaxhighlight>

== Browserunterstützung ==
Seit Juni 2011 enthält [[Mozilla Firefox|Firefox 5]] Unterstützung für CSS-Animationen.<ref>{{Internetquelle|url=https://www.mozilla.com/en-US/firefox/5.0/releasenotes/ |titel=Firefox 5 release notes |datum=2011-06-21 |hrsg=The Mozilla Foundation|zugriff=28. Oktober 2011}}</ref> CSS-Animationen sind außerdem seit 2007 in den [[Nightly Build]]s von [[WebKit]], [[Google Chrome]], [[Apple Safari]], [[Android (Betriebssystem)|Android]] 2.x und 3.x und dem RIM OS6-Webbrowser mit dem <code>-webkit-</code>-[[Herstellerpräfix|Präfix]] als Modul verfügbar.<ref>{{Internetquelle|url=https://webkit.org/blog/138/css-animation/ |titel=CSS Animation |autor=Dave Hyatt |datum=2007-10-31 |hrsg=Surfin’ Safari|zugriff=28. Oktober 2011}}</ref><ref>{{Internetquelle|url=https://webkit.org/blog/324/css-animation-2/ |titel=CSS Animation |autor=Dean Jackson |datum=2009-02-05 |hrsg=Surfin’ Safari|zugriff=28. Oktober 2011}}</ref> Der [[Internet Explorer]] ist ab Version 10 in der Lage, CSS-Animationen darzustellen.<ref>[https://css-tricks.com/almanac/properties/a/animation/ CSS Almanac: animation], abgerufen am 12. Juli 2013 (englisch)</ref> 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, [[Synchronized Multimedia Integration Language|SMIL]]-Animationen Besorgnis ausgelöst;<ref>{{Internetquelle|url=https://snook.ca/archives/javascript/css_animations_in_safari/ |titel=CSS Animations in Safari |autor=Jonathan Snook |hrsg=Snook.ca|datum=2007-10-31|zugriff=28. Oktober 2011}}</ref> 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 [[Apple iOS|iOS]]-Produktlinie von Mobiltelefonen auszuweichen, welche den Webbrowser [[Apple Safari]] verwenden.<ref>{{Internetquelle|url=https://www.macrumors.com/2009/02/06/css-animation-coming-to-safari-already-in-iphone-less-dependence-on-flash/ |titel=CSS Animation Coming to Safari, Already in iPhone. Less Dependence on Flash? |hrsg=MacRumors.com |datum=2009-02-06 |autor=Arnold Kim|zugriff=28. Oktober 2011}}</ref><ref>{{Internetquelle |url=https://www.tuaw.com/2009/02/06/css-animation-to-replace-need-for-flash-in-mobilesafari-not-lik/ |titel=CSS Animation to replace need for Flash in MobileSafari? Not likely |hrsg=The Unofficial Apple Weblog |datum=2009-02-06 |autor=Robert Palmer |abruf=2024-07-05 |archiv-url=https://web.archive.org/web/20240705194535/https://www.tuaw.com/2009/02/06/css-animation-to-replace-need-for-flash-in-mobilesafari-not-lik/ |archiv-datum=2024-07-05 |offline=ja }}</ref><ref>{{Internetquelle|url=https://www.applethoughts.com/news/show/92481/css-animations-a-flash-substitute.html |titel=CSS Animations: A Flash Substitute? |hrsg=Apple Thoughts |datum=2009-02-09 |autor=Vincent Ferrari|zugriff=28. Oktober 2011}}</ref>

== Quellen ==
<references />

== Weblinks ==
* {{Webarchiv | url=http://webkit.org/specs/CSSVisualEffects/CSSAnimation.html | wayback=20080430041229 | text=Initial Apple Proposal}}
* [https://dev.w3.org/csswg/css3-animations/ CSS Animations Module Level 3] draft on the [[World Wide Web Consortium|W3C]] website

[[Kategorie:Cascading Style Sheets|Css Animations]]

CSS Animations - Versionsgeschichte

imported>SchlurcherBot: Bot: http → https