animation
animation
This page has been flagged with the following issues:
High-level issues:
W3C Working Draft
Summary
The CSS3 Animation module describes a way for authors to animate CSS properties over time.
Overview table
| Initial value | (see individual properties)
|
|---|---|
| Applies to | all elements, :before and :after pseudo elements. |
| Inherited | No |
| Media | visual |
| Computed value | Same as specified value. |
| Animatable | No |
| CSS Object Model Property | |
Syntax
-
animation: single-animation
Values
- single-animation
- A space-separated list of values for each of the individual animation properties. The animation name and duration are required. All other values are optional.
<single-animation-name>- Value of the animation-name property.
<single-animation-duration>- Value of the animation-duration property.
<single-animation-timing-function>- Value of the animation-timing-function property.
<single-animation-delay>- Value of the animation-delay property.
<single-animation-iteration-count>- Value of the animation-iteration-count property.
<single-animation-direction>- Value of the animation-direction property.
<single-animation-fill-mode>- Value of the animation-fill-mode property.
Note The first <time> value is assigned to the animation-duration. The second <time> value is assigned to the animation-delay.
Needs Examples: This section should include examples.
Usage
The animation shorthand property combines all animation properties except animation-play-state in a single declaration. The name and duration of the animation are required, but all other values are optional. When two <time> values are supplied, the first is assigned to the duration, and the second to the delay.
Values for a single animation are separated by spaces. Multiple animations can be assigned as a comma-separated list.
Syntax
'animation: '[ animation-name || animation-duration || animation-timing-function || animation-delay || animation-iteration-count || animation-direction || animation-fill-mode ] [ , [ animation-name || animation-duration || animation-timing-function || animation-delay || animation-iteration-count || animation-direction || animation-fill-mode ] ] *
Notes
Before the advent of CSS3, most animations were performed by using Javascript to move HTML DOM elements. This was not optimal, as the browser would not know anything about the DOM element it was moving until it executed the Javascript which moved it, making hardware accelerating animations difficult for vendors. So, CSS3's animation module was born.
This module allows browser vendors to better support animations with hardware acceleration, especially important on CPU constrained devices such as mobile devices. Because the browser controls the inbetween state, or tween as it is more commonly known, between two animation states, it can fully hardware accelerate the resultant animation. This leads to lower CPU usage, smoother graphics and less battery intensive web pages on mobile devices.
Animations use keyframes to specify points of animation and timing to state when those keyframes should appear. Those keyframes exist in a separate @keyframes section in the CSS. The browser automatically handles the "tween" between each keyframe property. Animation is a shorthand property that defines all the properties of an animation in a single declaration. Animation applies to all elements. See the keyframes section linked above for a list of properties that can be animated. Also, see this CSS animations tutorial
Standards information
- CSS Animations Module Level 3, Section 3.9
Compatibility
Desktop
| Feature | Chrome | Firefox (Gecko) | Internet Explorer | Opera | Safari |
|---|---|---|---|---|---|
| Basic Support | 4.0 -webkit |
16.0 5.0 -moz |
10.0 | 12.1 12.0 -o |
3.1 -webkit
|
Mobile
| Feature | Android | BlackBerry | Chrome for mobile | Firefox Mobile (Gecko) | IE Mobile | Opera Mobile | Opera Mini | Safari Mobile |
|---|---|---|---|---|---|---|---|---|
| Basic Support | 2.1 -webkit |
7.0 -webkit |
18.0 -webkit |
16.0 15.0 -moz |
10.0 | 12.1 | Unsupported | 3.2 -webkit
|
Compatibility notes
| Browser | Version | Note |
|---|---|---|
| Internet Explorer | 10.0 | The -ms- prefix property is deprecated and should not be used. |
| Chrome | All so far | Chrome currently uses a lot of CPU resources when animations are played as the animation is hardware accelerated, however, as it moves it reports its position back to the dom many times per second. Safari doesn't seem to suffer from this problem. This issue can be tracked here: http://code.google.com/p/chromium/issues/detail?id=130850 |
See also
Related articles
Animation
- animation
Syntax
- animation
Other articles
" the CSS animations tutorial" @keyframes
Related pages (W3C)
http://www.w3.org/TR/css3-animations/ http://dev.w3.org/csswg/css3-transitions/#animatable-properties-
Related pages (MSDN)
CSSStyleDeclarationcurrentStylestyleaabbracronymbbdobigbrcitecodedfnemiimginputkbdlabelqsampselectsmallspanstrongsubsuptextAreattvaraddressblockQuotedivdlfieldSetformnoFramesnoScriptolppretableuldddtlitBodytdtFootthtHeadtrbuttondelinsmapobjectscript
This article contains content originally from external sources.
Portions of this content come from the Microsoft Developer Network: [Windows Internet Explorer API reference Article]
This tool helps to make and review comments inline.
How to Use
insert instructions, with images, here