CSS animations

From Wikipedia, the free encyclopedia

Template:Short description Lua error in package.lua at line 80: module 'Module:Category handler/data' not found.

Page Module:Infobox/styles.css has no content.

CSS Animations
CSS Animations Level 1
Lua error in package.lua at line 80: module 'Module:InfoboxImage/data' not found.
Interactive SVG using a hover effect
AbbreviationCSS-ANIMATIONS-1
Native name
CSS Animations
StatusW3C Working Draft
First publishedScript error: No such module "Date time".Script error: No such module "Check for unknown parameters".[1]
Latest versionScript error: No such module "Separated entries".
Preview versionScript error: No such module "Separated entries".
OrganizationWorld Wide Web Consortium
CommitteeCSS Working Group
EditorsPage Template:Plainlist/styles.css has no content.
  • Dean Jackson
  • L. David Baron
  • Tab Atkins Jr.
  • Brian Birtles
  • David Hyatt
  • Chris Marrin
  • Sylvain Galineau
Script error: No such module "Check for unknown parameters".[2]
Base standardsCSS
DomainCSS
Websitewww.w3.org/TR/css-animations-1/Script error: No such module "Check for unknown parameters".

Script error: No such module "Check for unknown parameters".

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

History

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

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

Animated SVG using CSS 3

Script error: No such module "Labelled list hatnote". 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

As of June 2011, Firefox 5 includes CSS animations support.[3] 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.[4][5][6] It is also used in iTunes 9 to support iTunes LP files.

Controversy

Early on in the development of the CSS animation it had drawn concern from those who prefer animation via JavaScript[7] 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.[8][9][10] 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[11] for users to copy. However, even with these previous controversies, CSS animations can be predominantly found and widely used across the internet.

See also

References

Page Template:Reflist/styles.css has no content.

  1. ^ Lua error in package.lua at line 80: module 'Module:Citation/CS1/Utilities' not found.
  2. ^ a b Cite error: The named reference w3c-draft was invoked but never defined (see the help page).Template:Broken ref/cat
  3. ^ Lua error in package.lua at line 80: module 'Module:Citation/CS1/Utilities' not found.
  4. ^ Lua error in package.lua at line 80: module 'Module:Citation/CS1/Utilities' not found.
  5. ^ Lua error in package.lua at line 80: module 'Module:Citation/CS1/Utilities' not found.
  6. ^ Lua error in package.lua at line 80: module 'Module:Citation/CS1/Utilities' not found.
  7. ^ Lua error in package.lua at line 80: module 'Module:Citation/CS1/Utilities' not found.
  8. ^ Lua error in package.lua at line 80: module 'Module:Citation/CS1/Utilities' not found.
  9. ^ Lua error in package.lua at line 80: module 'Module:Citation/CS1/Utilities' not found.
  10. ^ Lua error in package.lua at line 80: module 'Module:Citation/CS1/Utilities' not found.
  11. ^ Lua error in package.lua at line 80: module 'Module:Citation/CS1/Utilities' not found.

Script error: No such module "Check for unknown parameters".

Lua error in package.lua at line 80: module 'Module:Navbox/configuration' not found. Lua error in package.lua at line 80: module 'Module:Navbox/configuration' not found.

Template:Asbox