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
is a proposed 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
]
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
]
References
[
edit
]
- ^
"CSS Animations Level 1 Publication History - W3C"
.
W3C
. n.d
. Retrieved
2021-04-09
.
- ^
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
.
- ^
Baron, L. David; Birtles, Brian, eds. (2023-03-02).
"CSS Animations Level 2"
.
CSS Working Group Editor Drafts
. Retrieved
2023-03-26
.
- ^
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
)
- ^
Hyatt, Dave (2007-10-31),
"CSS Animation | WebKit"
,
WebKit
, Surfin’ Safari
, retrieved
2021-04-09
- ^
Jackson, Dean (2009-02-05),
"CSS Animation | WebKit"
,
WebKit
, Surfin’ Safari
, retrieved
2021-04-09
- ^
"@keyframes rule (Internet Explorer)"
,
Microsoft Docs
, Microsoft, 2018-11-25, archived from
the original
on 2018-11-26
, retrieved
2021-04-09
- ^
Snook, Jonathan (2007-10-31),
CSS Animations in Safari
, Snook.ca,
archived
from the original on 2021-01-27
, retrieved
2021-04-09
- ^
Kim, Arnold (2009-02-06),
CSS Animation Coming to Safari, Already in iPhone. Less Dependence on Flash?
, MacRumors.com
, retrieved
2021-04-09
- ^
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
- ^
Ferrari, Vincent (2009-02-09),
CSS Animations: A Flash Substitute?
, Apple Thoughts
, retrieved
2021-04-09
- ^
ButtonAnimations (2019-12-11).
"Button Animations CSS (w/ code)"
.
ButtonAnimations
. Retrieved
2021-04-09
.
External links
[
edit
]
|
---|
By country
| |
---|
Industry
| |
---|
Works
| |
---|
Techniques
| |
---|
Variants
| |
---|
Related topics
| |
---|
|
|
---|
Products and
standards
| |
---|
Organizations
| | Working groups
| |
---|
Community & business groups
| |
---|
Closed groups
| |
---|
|
---|
Software
| |
---|
Conferences
| |
---|