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 techno ...
that allows the
animation
Animation is a method by which image, still figures are manipulated to appear as Motion picture, moving images. In traditional animation, images are drawn or painted by hand on transparent cel, celluloid sheets to be photographed and exhibited ...
of
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 JavaScri ...
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 PS ...
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 to ...
(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
![Epicyclic gearing animation](https://upload.wikimedia.org/wikipedia/commons/e/ef/Epicyclic_gearing_animation.svg)
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 importa ...
4 and 5 and Safari for
iOS
iOS (formerly iPhone OS) is a mobile operating system created and developed by Apple Inc. exclusively for its hardware. It is the operating system that powers many of the company's mobile devices, including the iPhone; the term also includes ...
(iPhone, iPod Touch, iPad),
Android
Android may refer to:
Science and technology
* Android (robot), a humanoid robot or synthetic organism designed to imitate a human
* Android (operating system), Google's mobile operating system
** Bugdroid, a Google mascot sometimes referred to ...
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 user interface, graphical web browsers developed by Microsoft which was used in the Microsoft Wind ...
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 mul ...
9 to support
iTunes LP
iTunes LP (referred to in pre-launch press by the code name Cocktail) is a format for interactive album artwork introduced by Apple Inc. on September 9, 2009. It is similar to the CMX format being developed by the three major record labels, an ...
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 Website, websites use JavaScript on the Client (computing), client side ...
or, to a lesser-used extent,
Synchronized Multimedia Integration Language (SMIL); others have claimed that it is a move by
Apple Inc.
Apple Inc. is an American multinational technology company headquartered in Cupertino, California, United States. Apple is the largest technology company by revenue (totaling in 2021) and, as of June 2022, is the world's biggest company b ...
, the main sponsor of the WebKit project, to sidestep the inclusion of
Adobe Flash
Adobe Flash (formerly Macromedia Flash and FutureSplash) is a multimedia Computing platform, software platform used for production of Flash animation, animations, rich web applications, application software, desktop applications, mobile apps, mo ...
(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) p ...
s) on the company's
iOS
iOS (formerly iPhone OS) is a mobile operating system created and developed by Apple Inc. exclusively for its hardware. It is the operating system that powers many of the company's mobile devices, including the iPhone; the term also includes ...
line of mobile devices which use
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 importa ...
. 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.
See also
*
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) p ...
*
SVG animation
References
External links
Initial Apple ProposalExamples of CSS AnimationLearning to use CSS Animations - with practical examplesCSS Animation Generator
Animation techniques
Apple Inc. software
Cascading Style Sheets
{{comm-design-stub