CSS - animation
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
.
Examples
Example1
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%; } }
Syntax
/* @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;
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.
Formal syntax
<a href="css/animation#single-animation"><single-animation></a><a title="Hash mark" href="css/value_definition_syntax#hash_mark_(.23)">#</a><p>where <br><code><single-animation> = <a title="Possible values: a number followed by's' or 'ms', like 3s, -2.5ms or 0s." href="css/time"><time></a> <a title="Double bar" href="css/value_definition_syntax#double_bar">||</a> <a href="css/animation#single-timing-function"><single-timing-function></a> <a title="Double bar" href="css/value_definition_syntax#double_bar">||</a> <a title="Possible values: a number followed by's' or 'ms', like 3s, -2.5ms or 0s." href="css/time"><time></a> <a title="Double bar" href="css/value_definition_syntax#double_bar">||</a> <a href="css/animation#single-animation-iteration-count"><single-animation-iteration-count></a> <a title="Double bar" href="css/value_definition_syntax#double_bar">||</a> <a href="css/animation#single-animation-direction"><single-animation-direction></a> <a title="Double bar" href="css/value_definition_syntax#double_bar">||</a> <a href="css/animation#single-animation-fill-mode"><single-animation-fill-mode></a> <a title="Double bar" href="css/value_definition_syntax#double_bar">||</a> <a href="css/animation#single-animation-play-state"><single-animation-play-state></a> <a title="Double bar" href="css/value_definition_syntax#double_bar">||</a> <a href="css/animation#single-animation-name"><single-animation-name></a></code></p><p>where <br><code><single-timing-function> = <a title="Possible values: cubic-bezier(), steps(), linear, ease, ease-in, ease-out, east-in-out, step-start-step-end" href="css/single-transition-timing-function"><single-transition-timing-function></a><br><single-animation-iteration-count> = infinite <a title="Single bar" href="css/value_definition_syntax#single_bar">|</a> <a title="" href="css/number"><number></a><br><single-animation-direction> = normal <a title="Single bar" href="css/value_definition_syntax#single_bar">|</a> reverse <a title="Single bar" href="css/value_definition_syntax#single_bar">|</a> alternate <a title="Single bar" href="css/value_definition_syntax#single_bar">|</a> alternate-reverse<br><single-animation-fill-mode> = none <a title="Single bar" href="css/value_definition_syntax#single_bar">|</a> forwards <a title="Single bar" href="css/value_definition_syntax#single_bar">|</a> backwards <a title="Single bar" href="css/value_definition_syntax#single_bar">|</a> both<br><single-animation-play-state> = running <a title="Single bar" href="css/value_definition_syntax#single_bar">|</a> paused<br><single-animation-name> = none <a title="Single bar" href="css/value_definition_syntax#single_bar">|</a> IDENT</code></p><p>where <br><code><single-transition-timing-function> = ease <a title="Single bar" href="css/value_definition_syntax#single_bar">|</a> linear <a title="Single bar" href="css/value_definition_syntax#single_bar">|</a> ease-in <a title="Single bar" href="css/value_definition_syntax#single_bar">|</a> ease-out <a title="Single bar" href="css/value_definition_syntax#single_bar">|</a> ease-in-out <a title="Single bar" href="css/value_definition_syntax#single_bar">|</a> step-start <a title="Single bar" href="css/value_definition_syntax#single_bar">|</a> step-end <a title="Single bar" href="css/value_definition_syntax#single_bar">|</a> steps(<a title="" href="css/integer"><integer></a><a title="Brackets" href="css/value_definition_syntax#brackets">[</a>, <a title="Brackets" href="css/value_definition_syntax#brackets">[</a> start <a title="Single bar" href="css/value_definition_syntax#single_bar">|</a> end <a title="Brackets" href="css/value_definition_syntax#brackets">]</a> <a title="Brackets" href="css/value_definition_syntax#brackets">]</a><a title="Question mark" href="css/value_definition_syntax#question_mark_(.3f)">?</a>) <a title="Single bar" href="css/value_definition_syntax#single_bar">|</a> cubic-bezier(<a title="" href="css/number"><number></a>, <a title="" href="css/number"><number></a>, <a title="" href="css/number"><number></a>, <a title="" href="css/number"><number></a>)</code></p>
Description
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
.
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:
|
Animatable | no |
Canonical order | order of appearance in the formal grammar of the values |
Browser Compatibility
Feature | Chrome | Firefox (Gecko) | Internet Explorer | Opera | Safari (WebKit) |
---|---|---|---|---|---|
Basic support | (Yes)-webkit 43.0 |
5.0 (5.0)-moz 16.0 (16.0)[2] |
10 | 12-o 12.50[3] |
4.0-webkit |
Feature | Android | Firefox Mobile (Gecko) | IE Phone | Opera Mobile | Safari Mobile |
---|---|---|---|---|---|
Basic support | 2.1 -webkit [1] 4.0 -webkit |
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
Specifications
Specification | Status | Comment |
---|---|---|
CSS Animations The definition of 'animation' in that specification. |
Working Draft | Initial definition |
License
© 2016 Mozilla Contributors
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.
https://developer.mozilla.org/en-us/docs/web/css/animation