# CSS animations

> Mediated Wiki article. Canonical URL: https://mediated.wiki/source/CSS_animations
> Markdown URL: https://mediated.wiki/source/CSS_animations.md
> Source: https://en.wikipedia.org/wiki/CSS_animations
> Source revision: 1347252458
> License: Creative Commons Attribution-ShareAlike 4.0 International (https://creativecommons.org/licenses/by-sa/4.0/)

CSS3 properties that would let some HTML elements animate

This article needs to be updated. Please help update this article to reflect recent events or newly available information. (July 2017)

CSS Animations CSS Animations Level 1 Interactive SVG using a hover 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 Dean Jackson L. David Baron Tab Atkins Jr. Brian Birtles David Hyatt Chris Marrin Sylvain Galineau [2] Base standards CSS Domain CSS Website www.w3.org/TR/css-animations-1/

Cascading Style Sheets Style sheet CSS Zen Garden Concepts Animations Box model Flexbox Grid Image replacement Philosophies Tableless Responsive "Holy grail" CSS hack Preprocessors Sass Less Stylus (stylesheet language) Frameworks Tailwind Bootstrap Foundation Extensions Stylish Stylus (browser extension) Comparisons Stylesheet languages Cascading Style Sheets v t e

**CSS animations** is a module for [Cascading Style Sheets](/source/Cascading_Style_Sheets) that allows the [animation](/source/Animation) of [HTML](/source/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](/source/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](/source/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](https://upload.wikimedia.org/wikipedia/commons/e/ef/Epicyclic_gearing_animation.svg) using CSS 3

Main article: [SVG animation § SVG animation using CSS](/source/SVG_animation#SVG_animation_using_CSS)

In addition to *hover*, [Scalable Vector Graphics](/source/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](/source/Google_Chrome), [Safari](/source/Safari_(web_browser)) 4 and 5 and Safari for [iOS](/source/IOS) (iPhone, iPod Touch, iPad), [Android](/source/Android_(operating_system)) versions 2.x and 3.x, [Internet Explorer](/source/Internet_Explorer) 10+ and [Microsoft Edge](/source/Microsoft_Edge) browser, the BlackBerry OS 6 web browser, with the -webkit- prefix.[5][6][7] It is also used in [iTunes](/source/ITunes) 9 to support [iTunes LP](/source/ITunes_LP) files.

## Controversy

Early on in the development of the CSS animation it had drawn concern from those who prefer animation via [JavaScript](/source/JavaScript)[8] or, to a lesser-used extent, [Synchronized Multimedia Integration Language](/source/Synchronized_Multimedia_Integration_Language) (SMIL); others have claimed that it is a move by [Apple Inc.](/source/Apple_Inc.), the main sponsor of the WebKit project, to sidestep the inclusion of [Adobe Flash](/source/Adobe_Flash) (and the incumbent [Flash animations](/source/Flash_animation)) on the company's [iOS](/source/IOS) line of mobile devices which use [Safari](/source/Safari_(web_browser)).[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](/source/Flash_animation)

- [SVG animation](/source/SVG_animation)

## References

1. **[^](#cite_ref-history_1-0)** ["CSS Animations Level 1 Publication History - W3C"](https://www.w3.org/standards/history/css-animations-1). *W3C*. n.d. Retrieved 2021-04-09.

1. ^ [***a***](#cite_ref-w3c-draft_2-0) [***b***](#cite_ref-w3c-draft_2-1) [***c***](#cite_ref-w3c-draft_2-2) Jackson, Dean; Baron, L. David; Atkins Jr., Tab; Birtles, Brian; Hyatt, David; Marrin, Chris; Galineau, Sylvain, eds. (2023-03-02). ["CSS Animations Level 1"](https://www.w3.org/TR/css-animations-1/). *W3C*. CSS Working Group. Retrieved 2023-03-26.

1. **[^](#cite_ref-w3c-editor-draft_3-0)** Baron, L. David; Birtles, Brian, eds. (2023-03-02). ["CSS Animations Level 2"](https://www.w3.org/TR/2023/WD-css-animations-2-20230302/). *CSS Working Group Editor Drafts*. Retrieved 2023-03-26.

1. **[^](#cite_ref-4)** [*Mozilla Firefox Release Notes*](https://web.archive.org/web/20110811044717/https://www.mozilla.com/en-US/firefox/5.0/releasenotes/), The Mozilla Foundation, 2011-06-21, archived from the original on 2011-08-11, retrieved 2021-04-09{{[citation](https://en.wikipedia.org/wiki/Template:Citation)}}: CS1 maint: bot: original URL status unknown ([link](https://en.wikipedia.org/wiki/Category:CS1_maint:_bot:_original_URL_status_unknown))

1. **[^](#cite_ref-5)** Hyatt, Dave (2007-10-31), ["CSS Animation | WebKit"](http://webkit.org/blog/138/css-animation/), *WebKit*, Surfin’ Safari, retrieved 2021-04-09

1. **[^](#cite_ref-6)** Jackson, Dean (2009-02-05), ["CSS Animation | WebKit"](http://webkit.org/blog/324/css-animation-2/), *WebKit*, Surfin’ Safari, retrieved 2021-04-09

1. **[^](#cite_ref-7)** ["@keyframes rule (Internet Explorer)"](https://web.archive.org/web/20181126005534/https://msdn.microsoft.com/en-us/ie/hh772747(v=vs.94)), *Microsoft Docs*, Microsoft, 2018-11-25, archived from [the original](https://msdn.microsoft.com/en-us/ie/hh772747(v=vs.94)) on 2018-11-26, retrieved 2021-04-09

1. **[^](#cite_ref-8)** Snook, Jonathan (2007-10-31), [*CSS Animations in Safari*](http://snook.ca/archives/javascript/css_animations_in_safari/), Snook.ca, [archived](https://web.archive.org/web/20210127175208/http://snook.ca/archives/javascript/css_animations_in_safari/) from the original on 2021-01-27, retrieved 2021-04-09

1. **[^](#cite_ref-9)** Kim, Arnold (2009-02-06), [*CSS Animation Coming to Safari, Already in iPhone. Less Dependence on Flash?*](http://www.macrumors.com/2009/02/06/css-animation-coming-to-safari-already-in-iphone-less-dependence-on-flash/), MacRumors.com, retrieved 2021-04-09

1. **[^](#cite_ref-10)** Palmer, Robert (2009-02-06), [*CSS Animation to replace need for Flash in MobileSafari? Not likely*](https://web.archive.org/web/20090209223736/http://www.tuaw.com/2009/02/06/css-animation-to-replace-need-for-flash-in-mobilesafari-not-lik/), The Unofficial Apple Weblog, archived from [the original](http://www.tuaw.com/2009/02/06/css-animation-to-replace-need-for-flash-in-mobilesafari-not-lik/) on 2009-02-09, retrieved 2021-04-09

1. **[^](#cite_ref-11)** Ferrari, Vincent (2009-02-09), [*CSS Animations: A Flash Substitute?*](http://www.applethoughts.com/news/show/92481/css-animations-a-flash-substitute.html), Apple Thoughts, retrieved 2021-04-09

1. **[^](#cite_ref-12)** ButtonAnimations (2019-12-11). ["Button Animations CSS (w/ code)"](https://buttonanimations.github.io/). *ButtonAnimations*. Retrieved 2021-04-09.

## External links

- [Initial Apple Proposal](https://web.archive.org/web/20080430041229/http://webkit.org/specs/CSSVisualEffects/CSSAnimation.html)

v t e Animation topics By country Azerbaijan Bangladesh Bhutan Brazil Bulgaria Canada China history Czechia Estonia France Hungary India history Indonesia Iran Italy Japan history Korea North South history Latvia Lithuania Malaysia Mexico North Korea Philippines Portugal Romania Russia South Africa Spain Taiwan Thailand Ukraine United Kingdom United States Silent Era The Golden Age World War II Early TV broadcast era Modern TV cable and streaming era Vietnam Industry Animator List Animation department Animation director Story artist Animation studios List Animation database Art pipeline Biologist simulators Animation film festivals international regional Highest-grossing films (Opening weekends) Outsourcing International Animation Day Works Films Computer-animated Feature-length Lost or unfinished Package Short Short series Stop-motion Adult animated films Children's animated films Series Adult animated Children's animated Computer-animated Direct-to-video Flash Traditional Internet Television (list of years in animation · years in animation) Techniques Traditional Barrier-grid and stereography Flip book Limited animation Masking Rotoscoping Exposure sheet Stop motion Claymation clay painting, strata-cut Cutout (silhouette) Graphic Model go motion Object Brickfilm Pixilation Puppetoons Computer 2D 2.5D Flash PowerPoint SVG CSS Multi-sketch Onion skinning 3D T-pose Cel shading CGI Crowd Facial animation Morph target Motion capture facial hand tracking eye tracking Non-photorealistic rendering Physically based animation Procedural Skeletal Virtual cinematography Puppetry Traditional puppetry Digital puppetry Machinima Aniforms Virtual human Live2D Supermarionation Mechanical Animatronics Audio-Animatronics Linear Animation Generator Direct manipulation animation Humanoid animation Idle animation Ink-wash animation Magic Lantern Scanimate Shadowmation Squigglevision Whiteboard animation Other methods Blocking Character animation model sheet walk cycle lip sync off-model Chuckimation Drawn-on-film Erasure animation Hydrotechnics Inbetweening Morphing Paint-on-glass Pinscreen Pixel art Pose to pose Straight ahead Rubber hose Special effects Sand Syncro-Vox Zoetrope Variants Abstract animation (visual music) Adult animation Animated cartoon Animated sitcom Animated documentary Educational animation Erotic animation Independent animation Instructional animation Virtual newscaster History Early history History of computer animation List of years in animation Related topics Animation music Bouncing ball Mickey Mousing Key frame Cel Character animation model sheet walk cycle lip sync off-model Creature animation Twelve basic principles Motion comic Films with live action and animation highest grossing Cartoon physics violence Most expensive animated films List of animated films by box office admissions List of animated television series by episode count Category Portal Outline

v t e World Wide Web Consortium (W3C) Products, standards Recommendations ActivityPub Activity Streams ARIA Canonical XML CDF CSS Animations Flexbox Grid DOM EXI EmotionML Geolocation API GRDDL HTML HTML5 IndexedDB ITS JSON-LD Linked Data Notifications MathML Micropub MTOM OWL PLS RDF Schema RDFa RIF SAWSDL SISR SKOS SMIL SOAP SRGS SRI SSML SVG Animation Filter Effects SCXML SHACL SPARQL Timed text VoiceXML WebAssembly WoT TD Web storage WSDL Webmention WebSub WebVTT WOFF WS-Addressing XHTML +RDFa XML Base Encryption Events Information Set Namespace Schema Signature XForms XInclude XLink XOP XPath 2.0 3.x XPointer XProc XQuery XSL XSL-FO XSLT elements Notes IndieAuth XAdES XBL XHTML+SMIL XUP Working drafts CCXML CURIE EME InkML MSE SMIL Timesheets sXBL WebGPU WebXR XFDL XFrames XMLHttpRequest Guidelines Web Content Accessibility Guidelines Initiative Markup Validation Service Web Accessibility Initiative Web Components Deprecated C-HTML HDML JSSS PGML VML WebPlatform Obsoleted P3P XHTML+MathML+SVG Groups, organizations WHATWG Defunct: World Wide Web Foundation Elected AB Board TAG Working CSS SVG WebAssembly WebAuthn Community, business Web Advertising BG WebAssembly CG Closed Device Description (DDWG) HTML Multimodal Interaction Activity (MMI) 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)

This communication design-related article is a stub. You can help Wikipedia by adding missing information.

- [v](https://en.wikipedia.org/wiki/Template:Comm-design-stub)
- [t](/source/Template_talk%3AComm-design-stub)
- [e](https://en.wikipedia.org/wiki/Special:EditPage/Template:Comm-design-stub)

---
Adapted from the Wikipedia article [CSS animations](https://en.wikipedia.org/wiki/CSS_animations) by Wikipedia contributors ([contributor history](https://en.wikipedia.org/wiki/CSS_animations?action=history)). Available under [Creative Commons Attribution-ShareAlike 4.0 International](https://creativecommons.org/licenses/by-sa/4.0/). Changes may have been made.