 | This article needs to beupdated. Please help update this article to reflect recent events or newly available information.(July 2017) |
| CSS Animations | |
|---|---|
| CSS Animations Level 1 | |
 Interactive SVG using ahover effect | |
| Abbreviation | CSS-ANIMATIONS-1 |
| Native name | CSS Animations |
| Status | W3C Working Draft |
| First published | 20 March 2009 (2009-03-20)[1] |
| Latest version | Level 1 March 2, 2023 (2023-03-02)[2] |
| Preview version | Level 2 March 2, 2023 (2023-03-02)[3] |
| Organization | World Wide Web Consortium |
| Committee | CSS Working Group |
| Editors |
|
| Base standards | CSS |
| Domain | CSS |
| Website | www |
| Cascading Style Sheets |
|---|
| Concepts |
| Philosophies |
| Tools |
| Comparisons |
CSS animations is a module forCascading Style Sheets that allows theanimation ofHTML document elements using CSS.
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 theWorld Wide Web Consortium (W3C).
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.
In addition tohover,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]
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 asGoogle Chrome,Safari 4 and 5 and Safari foriOS (iPhone, iPod Touch, iPad),Android versions 2.x and 3.x,Internet Explorer 10+ andMicrosoft Edge browser, the BlackBerry OS 6 web browser, with the-webkit- prefix.[5][6][7] It is also used iniTunes 9 to supportiTunes LP files.
Early on in the development of the CSS animation it had drawn concern from those who prefer animation viaJavaScript[8] or, to a lesser-used extent,Synchronized Multimedia Integration Language (SMIL); others have claimed that it is a move byApple Inc., the main sponsor of the WebKit project, to sidestep the inclusion ofAdobe Flash (and the incumbentFlash animations) on the company'siOS line of mobile devices which useSafari.[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.
{{citation}}: CS1 maint: bot: original URL status unknown (link)Animation topics | |||||||||||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
| By country | |||||||||||||||||
| Industry | |||||||||||||||||
| Works | |||||||||||||||||
| Techniques |
| ||||||||||||||||
| Variants | |||||||||||||||||
| History | |||||||||||||||||
| Related topics | |||||||||||||||||
 | Thiscommunication design-related article is astub. You can help Wikipedia byadding missing information. |
