CSS animations

Short description: CSS3 properties that would let some HTML elements animate

CSS AnimationsCSS Animations Level 1

Interactive SVG using a hover effect

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|

* Dean Jackson
* L. David Baron
* Tab Atkins Jr.
* Brian Birtles
* David Hyatt
* Chris Marrin
* Sylvain Galineau

[2]
Base standards| CSS
Domain| CSS
Abbreviation| CSS-ANIMATIONS-1
Website| www.w3.org/TR/css-animations-1/
Cascading Style Sheets

* Style sheet
* CSS Zen Garden
* The Zen of CSS Design

Concepts

* box model
* image replacement
* flexbox
* grid

Philosophies

* Tableless
* Responsive
* "Holy grail"

Tools

* Sass
* Less
* Stylus
* CSSTidy

Comparisons

* CSS support
* Stylesheet languages

* Cascading Style Sheets

* v
* t
* e

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

## Contents

* 1 History
* 2 Current
* 3 Scalable Vector Graphics
* 4 Browser support
* 5 Controversy
* 6 See also
* 7 References
* 8 External links

## 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

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.[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

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

* Flash animation
* SVG animation

## References

1. ↑ "CSS Animations Level 1 Publication History - W3C". n.d.. https://www.w3.org/standards/history/css-animations-1.
2. ↑ 2.0 2.1 2.2 "CSS Animations Level 1". CSS Working Group. 2023-03-02. https://www.w3.org/TR/css-animations-1/.
3. ↑ Baron, L. David, ed (2023-03-02). "CSS Animations Level 2". https://www.w3.org/TR/2023/WD-css-animations-2-20230302/.
4. ↑ Mozilla Firefox Release Notes, The Mozilla Foundation, 2011-06-21, https://www.mozilla.com/en-US/firefox/5.0/releasenotes/, retrieved 2021-04-09
5. ↑ Hyatt, Dave (2007-10-31), CSS Animation | WebKit, Surfin’ Safari, http://webkit.org/blog/138/css-animation/, retrieved 2021-04-09
6. ↑ Jackson, Dean (2009-02-05), CSS Animation | WebKit, Surfin’ Safari, http://webkit.org/blog/324/css-animation-2/, retrieved 2021-04-09
7. ↑ @keyframes rule (Internet Explorer), Microsoft, 2018-11-25, https://msdn.microsoft.com/en-us/ie/hh772747(v=vs.94), retrieved 2021-04-09
8. ↑ Snook, Jonathan (2007-10-31), CSS Animations in Safari, Snook.ca, http://snook.ca/archives/javascript/css_animations_in_safari/, retrieved 2021-04-09
9. ↑ Kim, Arnold (2009-02-06), CSS Animation Coming to Safari, Already in iPhone. Less Dependence on Flash?, MacRumors.com, http://www.macrumors.com/2009/02/06/css-animation-coming-to-safari-already-in-iphone-less-dependence-on-flash/, 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, http://www.tuaw.com/2009/02/06/css-animation-to-replace-need-for-flash-in-mobilesafari-not-lik/, retrieved 2021-04-09
11. ↑ Ferrari, Vincent (2009-02-09), CSS Animations: A Flash Substitute?, Apple Thoughts, http://www.applethoughts.com/news/show/92481/css-animations-a-flash-substitute.html, retrieved 2021-04-09
12. ↑ ButtonAnimations (2019-12-11). "Button Animations CSS (w/ code)". https://buttonanimations.github.io/.

## External links

* Initial Apple Proposal
* Examples of CSS Animation
* Learning to use CSS Animations - with practical examples
* CSS Animation Generator
* Visual CSS Animation Editor

* v
* t
* e

World Wide Web Consortium (W3C)

Products and
standards|

| Recommendations|

* ActivityPub
* ARIA
* Canonical XML
* CDF
* CSS
* DOM
* Geolocation API
* HTML (HTML5)
* ITS
* JSON-LD
* Linked Data Notifications
* MathML
* Micropub
* OWL
* PLS
* RDF
* RDF Schema
* SISR
* SKOS
* SMIL
* SOAP
* SRGS
* SRI
* SSML
* SVG
* SCXML
* SHACL
* SPARQL
* Timed text
* VoiceXML
* Web storage
* WSDL
* Webmention
* WebSub
* XForms
* XHTML
* XHTML+RDFa
* XInclude
* XLink
* XML
* XML Base
* XML Encryption
* XML Events
* XML Information Set
* XML namespace
* XML Schema
* XML Signature
* XOP
* XPath
* XPath 2.0
* XPointer
* XProc
* XQuery
* XSL
* XSL-FO
* XSLT (elements)

|

Notes|

* IndieAuth
* JF2
* Post Type Discovery
* XAdES
* XHTML+SMIL
* XUP

Working drafts|

* CCXML
* CURIE
* EME
* InkML
* MSE
* RIF
* SMIL Timesheets
* sXBL
* XFDL
* XFrames
* XBL
* XMLHttpRequest

Guidelines|

* Web Content Accessibility Guidelines

Initiative|

* Multimodal Interaction Activity (MMI)
* Markup Validation Service
* Web Accessibility Initiative
* WebPlatform

Deprecated|

* C-HTML
* HDML
* JSSS
* PGML
* VML
* XHTML+MathML+SVG

Obsoleted|

* P3P

Organizations|

* Advisory Committee (AC)
* World Wide Web Foundation

Elected groups|

* Advisory Board (AB)

Working groups|

* CSS
* Geolocation
* Social Web
* SVG
* Web Hypertext Application Technology (WHATWG)
* Web Platform

Community groups|

* Web Incubator Community Group (WICG)

Closed groups|

* Device Description (DDWG)
* HTML

Software|

* CERN httpd
* Libwww

Browsers|

* Line Mode (1990–)
* Arena (1993–98)
* Agora (1994–97)
* Argo (1994–97)
* Amaya (browser/editor, 1996–2012)

Conferences|

* International World Wide Web Conference (IW3C)
* Steering Committee (IW3C2)
* First conference ("WWW1", 1994)

0.00

(0 votes)

Original source: https://en.wikipedia.org/wiki/CSS animations. Read more

|

Retrieved from "https://handwiki.org/wiki/index.php?title=CSS_animations&oldid=295561"
*[v]: View this template
*[t]: Discuss this template
*[e]: Edit this template