CSS animations is a proposed module for

Cascading Style Sheets Cascading Style Sheets (CSS) is a style sheet language used for describing the presentation of a document written in a markup language such as HTML or XML (including XML dialects such as SVG, MathML or XHTML). CSS is a cornerstone tec ...

that allows the

animation Animation is a method by which still figures are manipulated to appear as moving images. In traditional animation, images are drawn or painted by hand on transparent celluloid sheets to be photographed and exhibited on film. Today, most ani ...

HTML The HyperText Markup Language or HTML is the standard markup language for documents designed to be displayed in a web browser. It can be assisted by technologies such as Cascading Style Sheets (CSS) and scripting languages such as JavaS ...

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 WebKit is a browser engine developed by Apple and primarily used in its Safari web browser, as well as on the iOS and iPadOS version of any web browser. WebKit is also used by the BlackBerry Browser, PlayStation consoles beginning from the ...

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 The World Wide Web Consortium (W3C) is the main international standards organization for the World Wide Web. Founded in 1994 and led by Tim Berners-Lee, the consortium is made up of member organizations that maintain full-time staff working ...

(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

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.

Browser support

As of June 2011, Firefox 5 includes CSS animations support. CSS animation is also available as a module in the nightly builds of WebKit as well as

Google Chrome Google Chrome is a cross-platform web browser developed by Google. It was first released in 2008 for Microsoft Windows, built with free software components from Apple WebKit and Mozilla Firefox. Versions were later released for Linux, macOS, ...

Safari A safari (; ) is an overland journey to observe wild animals, especially in eastern or southern Africa. The so-called "Big Five" game animals of Africa – lion, leopard, rhinoceros, elephant, and Cape buffalo – particularly form an impor ...

4 and 5 and Safari for iOS (iPhone, iPod Touch, iPad), Android versions 2.x and 3.x,

Internet Explorer Internet Explorer (formerly Microsoft Internet Explorer and Windows Internet Explorer, commonly abbreviated IE or MSIE) is a series of graphical web browsers developed by Microsoft which was used in the Windows line of operating systems (in ...

10+ and Microsoft Edge browser, the BlackBerry OS 6 web browser, with the -webkit- prefix. It is also used in

iTunes iTunes () is a software program that acts as a media player, media library, mobile device management utility, and the client app for the iTunes Store. Developed by Apple Inc., it is used to purchase, play, download, and organize digital mu ...

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 JavaScript (), often abbreviated as JS, is a programming language that is one of the core technologies of the World Wide Web, alongside HTML and CSS. As of 2022, 98% of websites use JavaScript on the client side for webpage behavior, of ...

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 Adobe Flash (formerly Macromedia Flash and FutureSplash) is a multimedia software platform used for production of animations, rich web applications, desktop applications, mobile apps, mobile games, and embedded web browser video players. Flash ...

(and the incumbent

Flash animation Adobe Flash animation or Adobe Flash cartoon (formerly Macromedia Flash animation, Macromedia Flash cartoon, FutureSplash animation, and FutureSplash cartoon) is an animation that is created with the Adobe Animate (formerly Flash Professional) ...

s) on the company's iOS line of mobile devices which use

. 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 for users to copy. However, even with these previous controversies, CSS animations can be predominantly found and widely used across the internet.

References

External links

Initial Apple Proposal

Examples of CSS Animation

Learning to use CSS Animations - with practical examples

CSS Animation Generator
Animation techniques Apple Inc. software Cascading Style Sheets {{comm-design-stub