The animation
CSS property is a shorthand property for the various animation properties: 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 individual 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 of values within each animation definition is important: 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
.
The order within each animation definition is also important for distinguishing animation-name
values from other keywords. When parsed, keywords that are valid for properties other than animation-name
, and whose values were not found earlier in the shorthand, must be accepted for those properties rather than for animation-name
. Furthermore, when serialized, 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>
- The number of times the animation is played. The value must be one of those available in
animation-iteration-count
. <single-animation-direction>
- The direction in which the animation is played. The value must be one of those available in
animation-direction
. <single-animation-fill-mode>
- Determines how styles should be applied to the animation's target before and after its execution. The value must be one of those available in
animation-fill-mode
. <single-animation-play-state>
- Determines whether the animation is playing or not. The value must be one of those available in
animation-play-state
.
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> = linear | <cubic-bezier-timing-function> | <step-timing-function> | <frames-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
<cubic-bezier-timing-function> = ease | ease-in | ease-out | ease-in-out | cubic-bezier(<number>, <number>, <number>, <number>)
<step-timing-function> = step-start | step-end | steps(<integer>[, [ start | end ] ]?)
<frames-timing-function> = frames(<integer>)
Examples
Cylon Eye
<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: linear-gradient(to right, rgba(0, 0, 0, .9) 25%, rgba(0, 0, 0, .1) 50%, rgba(0, 0, 0, .9) 75%); color: white; height: 100%; width: 20%; -webkit-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%; } } @keyframes move_eye { from { margin-left: -20%; } to { margin-left: 100%; } }
See Using CSS animations for additional examples.
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 |
frames() timing function |
No support[4] | ? | No support[4] | No support | No support[4] | ? |
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 |
frames() timing function |
? | ? | No support[4] | No support | ? | ? |
[1] Partial support: the animation-fill-mode
property is not supported in Android browsers below 2.3.
[2] In addition to 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.
[4] The name of the frames()
timing function is currently under discussion, so it is currently disabled in browser release versions until a final decision is reached. It is currently enabled in Nightly/Canary only.
See also
- Using CSS animations
- JavaScript
AnimationEvent
API