Jump to content

CSS animations: Difference between revisions

From Wikipedia, the free encyclopedia
Browse history interactively
← Previous edit
Content deleted Content added
VisualWikitext
No edit summary
 
(48 intermediate revisions by 28 users not shown)
Line 1: Line 1:
{{Short description|CSS3 properties that would let some HTML elements animate}}
{{update|date=July 2017}}
{{Infobox technology standard
| title = CSS Animations
| long_name = CSS Animations Level 1
| native_name = CSS Animations
| native_name_lang = en
| image = Contra-zoom_aka_dolly_zoom_animation.svg{{!}}link={{filepath:Contra-zoom_aka_dolly_zoom_animation.svg}}|
| caption = [{{filepath:Contra-zoom_aka_dolly_zoom_animation.svg}} Interactive SVG] using a ''hover'' effect
| status = [[World_Wide_Web_Consortium#Working_draft_(WD)|W3C Working Draft]]
| year_started =
| first_published = {{Start date|2009|03|20|df=y}}<ref name="history">{{Cite web|url=https://www.w3.org/standards/history/css-animations-1|title=CSS Animations Level 1 Publication History - W3C|website=W3C|date=n.d.|access-date=2021-04-09}}</ref>
| version = Level 1
| version_date = {{Start date|2023|03|02}}<ref name="w3c-draft">{{Cite web|url=https://www.w3.org/TR/css-animations-1/|title=CSS Animations Level 1|publisher=CSS Working Group|collaboration=CSS Working Group|website=W3C|date=2023-03-02|access-date=2023-03-26
|editor-first1=Dean|editor-last1=Jackson
|editor-first2=L. David|editor-last2=Baron
|editor-first3=Tab|editor-last3=Atkins Jr.
|editor-first4=Brian|editor-last4=Birtles
|editor-first5=David|editor-last5=Hyatt
|editor-first6=Chris|editor-last6=Marrin
|editor-first7=Sylvain|editor-last7=Galineau
}}</ref>
| preview = Level 2
| preview_date = {{Start date|2023|03|02}}<ref name="w3c-editor-draft">{{Cite web|url=https://www.w3.org/TR/2023/WD-css-animations-2-20230302/|title=CSS Animations Level 2|website=CSS Working Group Editor Drafts|date=2023-03-02|access-date=2023-03-26|collaboration=CSS Working Group
|editor-first=L. David|editor-last=Baron
|editor-first2=Brian|editor-last2=Birtles
}}</ref>
| organization = [[World Wide Web Consortium]]
| committee = [[CSS Working Group]]
| editors = {{Plainlist|
* Dean Jackson
* [[David Baron (computer scientist)|L. David Baron]]
* Tab Atkins Jr.
* Brian Birtles
* David Hyatt
* Chris Marrin
* Sylvain Galineau
}}<ref name="w3c-draft" />
| authors =
| base_standards = [[CSS]]
| related_standards =
| abbreviation = CSS-ANIMATIONS-1
| domain = [[CSS]]
| license =
| website = {{URL|https://www.w3.org/TR/css-animations-1/}}
}}
{{CSS}}
{{CSS}}
'''CSS Animations''' is a proposed module for [[Cascading Style Sheets]] that allows the [[animation]] of [[HTML]] document elements using CSS.
'''CSS animations''' is a proposed module for [[Cascading Style Sheets]] that allows the [[animation]] of [[HTML]] document elements using CSS.


== History ==
== History ==
While the pseudo-class <code>:hover</code> has been used to generate rudimentary animations for years, extensions of CSS into the realm of animation were minimal until the late 2000s decade. As early as 2007, [[WebKit]] had announced its intent to include CSS animation, transitions, and transforms as features of WebKit. It also announced the implementation of both implicit and explicit animation through CSS in February 2009. CSS animation has also been put forth as a feature of CSS3, the ongoing draft specification managed by the [[World Wide Web Consortium]] (W3C).
While the pseudo-class <code>:hover</code> has been used to generate rudimentary animations for years, extensions of CSS into the realm of animation were minimal until the late 2000s decade. As early as 2007, [[WebKit]] had announced its intent to include CSS animation, transitions, and transforms as features of WebKit. It also announced the implementation of both implicit and explicit animation through CSS in February 2009. CSS animation has also been put forth as a feature of CSS3, the ongoing draft specification managed by the [[World Wide Web Consortium]] (W3C).


== Browser support ==
== Current ==
⚫
As of June 2011, Firefox 5 includes CSS Animation support.<ref>{{citation |url=https://www.mozilla.com/en-US/firefox/5.0/releasenotes/ |title=Firefox 5 release notes |date=2011-06-21 |publisher=The Mozilla Foundation}}</ref> CSS animation is also available as a module in the nightly builds of WebKit as well as [[Google Chrome]], [[Safari (web browser)|Safari]] 4 and 5 and Safari for [[iOS]] (iPhone, iPod Touch, iPad), [[Android (operating system)|Android]] versions 2.x and 3.x, the BlackBerry OS 6 web browser, with the <code>-webkit-</code> prefix.<ref>{{citation |url=http://webkit.org/blog/138/css-animation/ |title=CSS Animation |first=Dave |last=Hyatt |date=2007-10-31 |publisher=Surfin’ Safari}}</ref><ref>{{citation |url=http://webkit.org/blog/324/css-animation-2/ |title=CSS Animation |first=Dean |last=Jackson |date=2009-02-05 |publisher=Surfin’ Safari}}</ref> It is also used in [[iTunes]] 9 to support [[iTunes LP]] files.


CSS Animations is a module of Cascading Style Sheets. It allows users to hover over objects and an animation will play. Currently, it is adopted by all major search engines. Despite the controversy from those who prefer animation via Javascript, the hover tag is now widely used across the Cascading Style Sheets community.
Future support:

Opera v12+ will support CSS3 animations and transformations with <code>-o-</code> prefix
== Scalable Vector Graphics ==
Internet Explorer 10+ will support CSS3 animations and transformations with <code>-ms-</code> prefix
[[File:Epicyclic gearing animation.svg|thumb|link={{filepath:Epicyclic gearing animation.svg}}|[[Media:Epicyclic gearing animation.svg|Animated SVG]] using CSS 3]]
{{main|SVG animation#SVG animation using CSS}}
In addition to ''hover'', [[Scalable Vector Graphics]] supports the ''@keyframes'' at-rule, allowing a limited set of transformations to be animated. Firefox and Chrome used the ''@-moz-keyframes'' and ''@-webkit-keyframes'' extensions, respectively, before ''@keyframes'' was added to the CSS 3 specification.<ref name="w3c-draft" />

== Browser support ==
⚫
As of June 2011, Firefox 5 includes CSS animations support.<ref>{{citation|url=https://www.mozilla.com/en-US/firefox/5.0/releasenotes/|archive-url=https://web.archive.org/web/20110811044717/https://www.mozilla.com/en-US/firefox/5.0/releasenotes/|url-status=bot: unknown|title=Mozilla Firefox Release Notes|date=2011-06-21|archive-date=2011-08-11|access-date=2021-04-09|publisher=The Mozilla Foundation}}</ref> CSS animation is also available as a module in the nightly builds of WebKit as well as [[Google Chrome]], [[Safari (web browser)|Safari]] 4 and 5 and Safari for [[iOS]] (iPhone, iPod Touch, iPad), [[Android (operating system)|Android]] versions 2.x and 3.x, [[Internet Explorer]] 10+ and [[Microsoft Edge]] browser, the BlackBerry OS 6 web browser, with the <code>-webkit-</code> prefix.<ref>{{citation|url=http://webkit.org/blog/138/css-animation/|title=CSS Animation {{!}} WebKit|first=Dave|last=Hyatt |date=2007-10-31|access-date=2021-04-09|publisher=Surfin’ Safari|website=WebKit}}</ref><ref>{{citation|url=http://webkit.org/blog/324/css-animation-2/ |title=CSS Animation {{!}} WebKit|first=Dean|last=Jackson|date=2009-02-05|access-date=2021-04-09|publisher=Surfin’ Safari|website=WebKit}}</ref><ref>{{citation |url=https://msdn.microsoft.com/en-us/ie/hh772747(v=vs.94)|archive-url=https://web.archive.org/web/20181126005534/https://msdn.microsoft.com/en-us/ie/hh772747(v=vs.94)|url-status=dead|date=2018-11-25|archive-date=2018-11-26|access-date=2021-04-09|title=@keyframes rule (Internet Explorer)|publisher=Microsoft|website=Microsoft Docs}}</ref> It is also used in [[iTunes]] 9 to support [[iTunes LP]] files.


== Controversy ==
== Controversy ==
Early on in the development of the CSS animation it had drawn concern from those who prefer animation via [[JavaScript]]<ref>{{citation |url=http://snook.ca/archives/javascript/css_animations_in_safari/ |title=CSS Animations in Safari |first=Jonathan |last=Snook |publisher=Snook.ca |date=2007-10-31}}</ref> or, to a lesser-used extent, [[Synchronized Multimedia Integration Language]] (SMIL); others have claimed that it is a move by [[Apple Inc.]], the main sponsor of the WebKit project, to sidestep the inclusion of [[Adobe Flash]] (and the incumbent [[Flash animation]]s) on the company's [[iOS]] line of mobile devices which use [[Safari (web browser)|Safari]].<ref>{{citation |url=http://www.macrumors.com/2009/02/06/css-animation-coming-to-safari-already-in-iphone-less-dependence-on-flash/ |title=CSS Animation Coming to Safari, Already in iPhone. Less Dependence on Flash? |publisher=MacRumors.com |date=2009-02-06 |first=Arnold |last=Kim}}</ref><ref>{{citation |url=http://www.tuaw.com/2009/02/06/css-animation-to-replace-need-for-flash-in-mobilesafari-not-lik/ |title=CSS Animation to replace need for Flash in MobileSafari? Not likely |publisher=The Unofficial Apple Weblog |date=2009-02-06 |first=Robert |last=Palmer}}</ref><ref>{{citation |url=http://www.applethoughts.com/news/show/92481/css-animations-a-flash-substitute.html |title=CSS Animations: A Flash Substitute? |publisher=Apple Thoughts |date=2009-02-09 |first=Vincent |last=Ferrari}}</ref>
Early on in the development of the CSS animation it had drawn concern from those who prefer animation via [[JavaScript]]<ref>{{citation |url=http://snook.ca/archives/javascript/css_animations_in_safari/|archive-url=https://web.archive.org/web/20210127175208/http://snook.ca/archives/javascript/css_animations_in_safari/|url-status=live|archive-date=2021-01-27|title=CSS Animations in Safari |first=Jonathan |last=Snook |publisher=Snook.ca |date=2007-10-31|access-date=2021-04-09}}</ref> or, to a lesser-used extent, [[Synchronized Multimedia Integration Language]] (SMIL); others have claimed that it is a move by [[Apple Inc.]], the main sponsor of the WebKit project, to sidestep the inclusion of [[Adobe Flash]] (and the incumbent [[Flash animation]]s) on the company's [[iOS]] line of mobile devices which use [[Safari (web browser)|Safari]].<ref>{{citation |url=http://www.macrumors.com/2009/02/06/css-animation-coming-to-safari-already-in-iphone-less-dependence-on-flash/ |title=CSS Animation Coming to Safari, Already in iPhone. Less Dependence on Flash? |publisher=MacRumors.com |date=2009-02-06 |access-date=2021-04-09 |first=Arnold |last=Kim}}</ref><ref>{{citation |url=http://www.tuaw.com/2009/02/06/css-animation-to-replace-need-for-flash-in-mobilesafari-not-lik/ |title=CSS Animation to replace need for Flash in MobileSafari? Not likely |publisher=The Unofficial Apple Weblog |date=2009-02-06 |access-date=2021-04-09 |first=Robert |last=Palmer|archive-url=https://web.archive.org/web/20090209223736/http://www.tuaw.com/2009/02/06/css-animation-to-replace-need-for-flash-in-mobilesafari-not-lik/|archive-date=2009-02-09|url-status=dead}}</ref><ref>{{citation |url=http://www.applethoughts.com/news/show/92481/css-animations-a-flash-substitute.html |title=CSS Animations: A Flash Substitute? |publisher=Apple Thoughts |date=2009-02-09 |access-date=2021-04-09 |first=Vincent |last=Ferrari}}</ref> Furthermore, although Cascading Style Sheets is a relatively easy to use programming language, many programmers still struggle with making animations. With this problem, several individuals and websites have developed and created open source CSS button animations with code<ref>{{cite web|url=https://buttonanimations.github.io/|title=Button Animations CSS (w/ code)|website=ButtonAnimations|author=ButtonAnimations|date=2019-12-11|access-date=2021-04-09}}</ref> for users to copy. However, even with these previous controversies, CSS animations can be predominantly found and widely used across the internet.


== See also ==
== See also ==
Line 24: Line 75:
== External links ==
== External links ==
* [https://web.archive.org/web/20080430041229/http://webkit.org/specs/CSSVisualEffects/CSSAnimation.html Initial Apple Proposal]
* [https://web.archive.org/web/20080430041229/http://webkit.org/specs/CSSVisualEffects/CSSAnimation.html Initial Apple Proposal]
* [https://templatefor.net/css3-animation-examples-for-inspiration/ Examples of CSS Animation]
* [http://dev.w3.org/csswg/css3-animations/ CSS Animations Module Level 3] draft on the [[World Wide Web Consortium|W3C]] website
* [http://www.logopearl.com/blog/css3-animation-examples/ Examples of CSS Animation]
* [https://codecoda.com/en/blog/entry/css-animation Learning to use CSS Animations - with practical examples]
* [https://webcode.tools/generators/css/keyframe-animation CSS Animation Generator]


{{Animation}}
{{W3C standards}}
{{DEFAULTSORT:CSS animations}}
{{DEFAULTSORT:CSS animations}}
[[Category:Cascading Style Sheets]]
[[Category:Animation techniques]]
[[Category:Web animation]]
[[Category:Apple Inc. software]]
[[Category:Apple Inc. software]]
[[Category:Cascading Style Sheets]]


{{comm-design-stub}}
{{comm-design-stub}}

Latest revision as of 01:09, 21 April 2024

CSS Animations
CSS Animations Level 1
Interactive SVG using a hover effect
AbbreviationCSS-ANIMATIONS-1
Native name
CSS Animations
StatusW3C Working Draft
First published20 March 2009 (2009-03-20)[1]
Latest versionLevel 1
March 2, 2023 (2023-03-02)[2]
Preview versionLevel 2
March 2, 2023 (2023-03-02)[3]
OrganizationWorld Wide Web Consortium
CommitteeCSS Working Group
Editors
  • Dean Jackson
  • L. David Baron
  • Tab Atkins Jr.
  • Brian Birtles
  • David Hyatt
  • Chris Marrin
  • Sylvain Galineau
[2]
Base standardsCSS
DomainCSS
Websitewww.w3.org/TR/css-animations-1/
Cascading Style Sheets
Concepts
Philosophies
Tools
Comparisons

CSS animations is a proposed module for Cascading Style Sheets that allows the animation of HTML document elements using CSS.

History[edit]

While the pseudo-class :hover has been used to generate rudimentary animations for years, extensions of CSS into the realm of animation were minimal until the late 2000s decade. As early as 2007, WebKit had announced its intent to include CSS animation, transitions, and transforms as features of WebKit. It also announced the implementation of both implicit and explicit animation through CSS in February 2009. CSS animation has also been put forth as a feature of CSS3, the ongoing draft specification managed by the World Wide Web Consortium (W3C).

Current[edit]

CSS Animations is a module of Cascading Style Sheets. It allows users to hover over objects and an animation will play. Currently, it is adopted by all major search engines. Despite the controversy from those who prefer animation via Javascript, the hover tag is now widely used across the Cascading Style Sheets community.

Scalable Vector Graphics[edit]

Animated SVG using CSS 3
Main article: SVG animation § SVG animation using CSS

In addition to hover, Scalable Vector Graphics supports the @keyframes at-rule, allowing a limited set of transformations to be animated. Firefox and Chrome used the @-moz-keyframes and @-webkit-keyframes extensions, respectively, before @keyframes was added to the CSS 3 specification.[2]

Browser support[edit]

As of June 2011, Firefox 5 includes CSS animations support.[4] CSS animation is also available as a module in the nightly builds of WebKit as well as Google Chrome, Safari 4 and 5 and Safari for iOS (iPhone, iPod Touch, iPad), Android versions 2.x and 3.x, Internet Explorer 10+ and Microsoft Edge browser, the BlackBerry OS 6 web browser, with the -webkit- prefix.[5][6][7] It is also used in iTunes 9 to support iTunes LP files.

Controversy[edit]

Early on in the development of the CSS animation it had drawn concern from those who prefer animation via JavaScript[8] or, to a lesser-used extent, Synchronized Multimedia Integration Language (SMIL); others have claimed that it is a move by Apple Inc., the main sponsor of the WebKit project, to sidestep the inclusion of Adobe Flash (and the incumbent Flash animations) on the company's iOS line of mobile devices which use Safari.[9][10][11] Furthermore, although Cascading Style Sheets is a relatively easy to use programming language, many programmers still struggle with making animations. With this problem, several individuals and websites have developed and created open source CSS button animations with code[12] for users to copy. However, even with these previous controversies, CSS animations can be predominantly found and widely used across the internet.

See also[edit]

References[edit]

  1. ^ "CSS Animations Level 1 Publication History - W3C". W3C. n.d. Retrieved 2021-04-09.
  2. ^ a b c Jackson, Dean; Baron, L. David; Atkins Jr., Tab; Birtles, Brian; Hyatt, David; Marrin, Chris; Galineau, Sylvain, eds. (2023-03-02). "CSS Animations Level 1". W3C. CSS Working Group. Retrieved 2023-03-26.
  3. ^ Baron, L. David; Birtles, Brian, eds. (2023-03-02). "CSS Animations Level 2". CSS Working Group Editor Drafts. Retrieved 2023-03-26.
  4. ^ Mozilla Firefox Release Notes, The Mozilla Foundation, 2011-06-21, archived from the original on 2011-08-11, retrieved 2021-04-09{{citation}}: CS1 maint: bot: original URL status unknown (link)
  5. ^ Hyatt, Dave (2007-10-31), "CSS Animation | WebKit", WebKit, Surfin’ Safari, retrieved 2021-04-09
  6. ^ Jackson, Dean (2009-02-05), "CSS Animation | WebKit", WebKit, Surfin’ Safari, retrieved 2021-04-09
  7. ^ "@keyframes rule (Internet Explorer)", Microsoft Docs, Microsoft, 2018-11-25, archived from the original on 2018-11-26, retrieved 2021-04-09
  8. ^ Snook, Jonathan (2007-10-31), CSS Animations in Safari, Snook.ca, archived from the original on 2021-01-27, retrieved 2021-04-09
  9. ^ Kim, Arnold (2009-02-06), CSS Animation Coming to Safari, Already in iPhone. Less Dependence on Flash?, MacRumors.com, retrieved 2021-04-09
  10. ^ Palmer, Robert (2009-02-06), CSS Animation to replace need for Flash in MobileSafari? Not likely, The Unofficial Apple Weblog, archived from the original on 2009-02-09, retrieved 2021-04-09
  11. ^ Ferrari, Vincent (2009-02-09), CSS Animations: A Flash Substitute?, Apple Thoughts, retrieved 2021-04-09
  12. ^ ButtonAnimations (2019-12-11). "Button Animations CSS (w/ code)". ButtonAnimations. Retrieved 2021-04-09.

External links[edit]

Stub icon

This communication design-related article is a stub. You can help Wikipedia by expanding it.

Retrieved from "https://en.wikipedia.org/w/index.php?title=CSS_animations&oldid=1219970472"