CSS animations

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 AnimationsCSS 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"

Tools

* Sass
* Less
* Stylus

Comparisons

* Stylesheet languages

* Cascading Style Sheets

* v
* t
* e

CSS animations is a 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]

* Flash animation
* SVG animation

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

* Initial Apple Proposal

* v
* t
* e

Animation topics

By country|

* Bangladesh
* Bhutan
* China
* Czechia
* Estonia
* India
* Japan
* Malaysia
* Mexico
* North Korea
* Philippines
* Portugal
* Romania
* South Africa
* South Korea
* Spain
* Taiwan
* Thailand
* United States
* Vietnam

History|

* Azerbaijan
* Bangladesh
* Brazil
* Canada
* China
* France
* Hungary
* India
* Iran
* Japan
* Korea
* Russia
* Ukraine
* United Kingdom
* United States
* Silent Era
* The Golden Age
* World War II
* Early TV broadcast era
* Modern TV cable and streaming era

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
* Internet
* Television

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
(history, timeline)|

| 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
* Anime
* influenced
* Educational animation
* Erotic animation
* Independent animation
* Instructional animation
* Virtual newscaster

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
* anime series
* anime franchises

* Category
* Portal
* Outline

* v
* t
* e

World Wide Web Consortium (W3C)

Products and
standards|

| Recommendations|

* ActivityPub
* Activity Streams
* ARIA
* Canonical XML
* CDF
* CSS
* Animations
* Flexbox
* Grid
* DOM
* EXI
* EmotionML
* Geolocation API
* HTML
* HTML5
* IndexedDB
* ITS
* JSON-LD
* Linked Data Notifications
* MathML
* Micropub
* OWL
* PLS
* RDF
* Schema
* RDFa
* SISR
* SKOS
* SMIL
* SOAP
* SRGS
* SRI
* SSML
* SVG
* Filter Effects
* SCXML
* SHACL
* SPARQL
* Timed text
* VoiceXML
* WebAssembly
* WoT
* TD
* Web storage
* WSDL
* Webmention
* WebSub
* WebVTT
* WOFF
* 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
* RIF
* 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

Organizations|

* WHATWG
* Defunct: World Wide Web Foundation

Elected groups|

* AB
* Board
* TAG

Working groups|

* CSS
* SVG
* WebAssembly
* WebAuthn

Community & business groups|

* Web Advertising BG
* WebAssembly CG

Closed groups|

* 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 expanding it.

|

* v
* t
* e

*[v]: View this template
*[t]: Discuss this template
*[e]: Edit this template