animation
animation
This is an experimental technology
Because this technology's specification has not stabilized, check the compatibility table for usage in various browsers. Also note that the syntax and behavior of an experimental technology is subject to change in future versions of browsers as the specification changes.
The animation
CSS property is a shorthand property for animation-name
, animation-duration
, animation-timing-function
, animation-delay
, animation-iteration-count
, animation-direction
, animation-fill-mode
and animation-play-state
.
/* @keyframes duration | timing-function | delay | iteration-count | direction | fill-mode | play-state | name */ animation: 3s ease-in 1s 2 reverse both paused slidein; /* @keyframes duration | timing-function | delay | name */ animation: 3s linear 1s slidein; /* @keyframes duration | name */ animation: 3s slidein;
A description of which properties are animatable is available; it's worth noting that this description is also valid for CSS transitions.
Initial value | as each of the properties of the shorthand:
|
---|---|
Applies to | all elements, ::before and ::after pseudo-elements
|
Inherited | no |
Media | visual |
Computed value | as each of the properties of the shorthand:
|
Animation type | discrete |
Canonical order | order of appearance in the formal grammar of the values |
Syntax
The animation property is specified as one or more single animations, separated by commas.
Each single animation is specified as:
- zero or one occurrences of the following values:
- an optional name for the animation, which may be
none
, a<custom-ident>
, or a<string>
. - zero, one, or two
<time>
values.
The order is important within each animation definition: the first value that can be parsed as a <time>
is assigned to the animation-duration
, and the second one is assigned to animation-delay
.
Note that order is also important within each animation definition for distinguishing animation-name
values from other keywords. When parsing, keywords that are valid for properties other than animation-name
whose values were not found earlier in the shorthand must be accepted for those properties rather than for animation-name
. Furthermore, when serializing, default values of other properties must be output in at least the cases necessary to distinguish an animation-name
that could be a value of another property, and may be output in additional cases.
Values
<single-animation-iteration-count>
- May be either
infinite
or a<number>
- <single-animation-direction>
- May be any one of
normal
,reverse
,alternate
, oralternate-reverse
. <single-animation-fill-mode>
- May be any one of
none
,forwards
,backwards
, orboth
. <single-animation-play-state>
- May be either
running
orpaused
.
Formal syntax
<single-animation>#where
<single-animation> = <time> || <single-timing-function> || <time> || <single-animation-iteration-count> || <single-animation-direction> || <single-animation-fill-mode> || <single-animation-play-state> || [ none | <keyframes-name> ]where
<single-timing-function> = <single-transition-timing-function>
<single-animation-iteration-count> = infinite | <number>
<single-animation-direction> = normal | reverse | alternate | alternate-reverse
<single-animation-fill-mode> = none | forwards | backwards | both
<single-animation-play-state> = running | paused
<keyframes-name> = <custom-ident> | <string>where
<single-transition-timing-function> = ease | linear | ease-in | ease-out | ease-in-out | step-start | step-end | steps( <integer> [, [ start | end ] ]? ) | cubic-bezier( <number>, <number>, <number>, <number> )
Examples
See CSS animations for examples.
Cylon Eye
Considering all browser-specific prefixes, here is a cylon eye animation incorporating linear gradients and animations that works across all major browsers:
<div class="view_port"> <div class="polling_message"> Listening for dispatches </div> <div class="cylon_eye"></div> </div>
.polling_message { color: white; float: left; margin-right: 2%; } .view_port { background-color: black; height: 25px; width: 100%; overflow: hidden; } .cylon_eye { background-color: red; background-image: -webkit-linear-gradient( left, rgba( 0,0,0,0.9 ) 25%, rgba( 0,0,0,0.1 ) 50%, rgba( 0,0,0,0.9 ) 75%); background-image: -moz-linear-gradient( left, rgba( 0,0,0,0.9 ) 25%, rgba( 0,0,0,0.1 ) 50%, rgba( 0,0,0,0.9 ) 75%); background-image: -o-linear-gradient( left, rgba( 0,0,0,0.9 ) 25%, rgba( 0,0,0,0.1 ) 50%, rgba( 0,0,0,0.9 ) 75%); background-image: linear-gradient(to right, rgba( 0,0,0,0.9 ) 25%, rgba( 0,0,0,0.1 ) 50%, rgba( 0,0,0,0.9 ) 75%); color: white; height: 100%; width: 20%; -webkit-animation: 4s linear 0s infinite alternate move_eye; -moz-animation: 4s linear 0s infinite alternate move_eye; -o-animation: 4s linear 0s infinite alternate move_eye; animation: 4s linear 0s infinite alternate move_eye; } @-webkit-keyframes move_eye { from { margin-left:-20%; } to { margin-left:100%; } } @-moz-keyframes move_eye { from { margin-left:-20%; } to { margin-left:100%; } } @-o-keyframes move_eye { from { margin-left:-20%; } to { margin-left:100%; } } @keyframes move_eye { from { margin-left:-20%; } to { margin-left:100%; } }
Specifications
Specification | Status | Comment |
---|---|---|
CSS Animations The definition of 'animation' in that specification. | Working Draft | Initial definition |
Browser compatibility
Feature | Chrome | Edge | Firefox (Gecko) | Internet Explorer | Opera | Safari (WebKit) |
---|---|---|---|---|---|---|
Basic support |
(Yes)-webkit 43.0 |
(Yes)-webkit (Yes) |
5.0 (5.0)-moz 16.0 (16.0)[2] | 10 | 12-o 12.50[3] | 4.0-webkit |
Feature | Android | Edge | Firefox Mobile (Gecko) | IE Phone | Opera Mobile | Safari Mobile |
---|---|---|---|---|---|---|
Basic support | 2.1 -webkit [1] 4.0 -webkit |
(Yes)-webkit (Yes) | 5.0 (5.0)-moz 16.0 (16.0) | ? | ? | (Yes)-webkit |
[1] Partial support: animation-fill-mode
property is not supported in Android browser below 2.3.
[2] In addition to the unprefixed support, Gecko 44.0 (Firefox 44.0 / Thunderbird 44.0 / SeaMonkey 2.41) added support for a -webkit
prefixed version of the property for web compatibility reasons behind the preference layout.css.prefixes.webkit
, defaulting to false
. Since Gecko 49.0 (Firefox 49.0 / Thunderbird 49.0 / SeaMonkey 2.46) the preference defaults to true
.
[3] See the release notes to Opera 12.50.
See also
© 2005–2017 Mozilla Developer Network and individual contributors.
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.
https://developer.mozilla.org/en-US/docs/Web/CSS/animation