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;
<div class="grid">
<div class="col">
<div class="note">
Given the following animation:
<pre>@keyframes slidein {
from { transform: scaleX(0); }
to { transform: scaleX(1); }
}</pre>
</div>
<div class="row">
<div class="cell">
<button class="play" title="PLAY"></button>
</div>
<div class="cell flx">
<div class="overlay">animation: 3s ease-in 1s 2 reverse both paused slidein;</div>
<div class="animation a1"></div>
</div>
</div>
<div class="row">
<div class="cell">
<button class="pause" title="PAUSE"></button>
</div>
<div class="cell flx">
<div class="overlay">animation: 3s linear 1s slidein;</div>
<div class="animation a2"></div>
</div>
</div>
<div class="row">
<div class="cell">
<button class="pause" title="PAUSE"></button>
</div>
<div class="cell flx">
<div class="overlay">animation: 3s slidein;</div>
<div class="animation a3"></div>
</div>
</div>
</div>
</div>
html,body {
height: 100%;
box-sizing: border-box;
}
pre { margin-bottom: 0; }
svg { width: 1.5em; height: 1.5em; }
button {
width: 27px;
height: 27px;
background-size: 16px;
background-position: center;
background-repeat: no-repeat;
border-radius: 3px;
cursor: pointer;
}
button.play {
background-image: url('data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2016%2016%22%3E%3Cstyle%3Epath%20%7Bdisplay%3Anone%7D%20path%3Atarget%7Bdisplay%3Ablock%7D%3C%2Fstyle%3E%3Cpath%20id%3D%22play%22%20d%3D%22M3%2C3%20L3%2C13%20L13%2C8%20Z%22%20%2F%3E%3Cpath%20id%3D%22pause%22%20d%3D%22M5%2C4%20L7%2C4%20L7%2C13%20L5%2C13%20Z%20M9%2C4%20L11%2C4%20L11%2C13%20L9%2C13%20Z%22%20%2F%3E%3Cpath%20id%3D%22restart%22%20d%3D%22M13%2C9%20A5%2C5%2C1%2C1%2C1%2C8%2C4%20L8%2C2%20L12%2C5%20L8%2C8%20L8%2C6%20A3%2C3%2C1%2C1%2C0%2C11%2C9%20A1%2C1%2C1%2C1%2C1%2C13%2C9%20z%22%20%2F%3E%3C%2Fsvg%3E#play');
}
button.pause {
background-image: url('data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2016%2016%22%3E%3Cstyle%3Epath%20%7Bdisplay%3Anone%7D%20path%3Atarget%7Bdisplay%3Ablock%7D%3C%2Fstyle%3E%3Cpath%20id%3D%22play%22%20d%3D%22M3%2C3%20L3%2C13%20L13%2C8%20Z%22%20%2F%3E%3Cpath%20id%3D%22pause%22%20d%3D%22M5%2C4%20L7%2C4%20L7%2C13%20L5%2C13%20Z%20M9%2C4%20L11%2C4%20L11%2C13%20L9%2C13%20Z%22%20%2F%3E%3Cpath%20id%3D%22restart%22%20d%3D%22M13%2C9%20A5%2C5%2C1%2C1%2C1%2C8%2C4%20L8%2C2%20L12%2C5%20L8%2C8%20L8%2C6%20A3%2C3%2C1%2C1%2C0%2C11%2C9%20A1%2C1%2C1%2C1%2C1%2C13%2C9%20z%22%20%2F%3E%3C%2Fsvg%3E#pause');
}
button.restart {
background-image: url('data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2016%2016%22%3E%3Cstyle%3Epath%20%7Bdisplay%3Anone%7D%20path%3Atarget%7Bdisplay%3Ablock%7D%3C%2Fstyle%3E%3Cpath%20id%3D%22play%22%20d%3D%22M3%2C3%20L3%2C13%20L13%2C8%20Z%22%20%2F%3E%3Cpath%20id%3D%22pause%22%20d%3D%22M5%2C4%20L7%2C4%20L7%2C13%20L5%2C13%20Z%20M9%2C4%20L11%2C4%20L11%2C13%20L9%2C13%20Z%22%20%2F%3E%3Cpath%20id%3D%22restart%22%20d%3D%22M13%2C9%20A5%2C5%2C1%2C1%2C1%2C8%2C4%20L8%2C2%20L12%2C5%20L8%2C8%20L8%2C6%20A3%2C3%2C1%2C1%2C0%2C11%2C9%20A1%2C1%2C1%2C1%2C1%2C13%2C9%20z%22%20%2F%3E%3C%2Fsvg%3E#restart');
}
.grid {
width: 100%;
height: 100%;
display: flex;
background: #EEE;
font: 1em monospace;
}
.row {
display: flex;
flex: 1 auto;
flex-direction: row;
flex-wrap: wrap;
justify-content: space-between;
}
.col {
display: flex;
flex: 1 auto;
flex-direction: column;
}
.cell {
box-sizing: border-box;
margin: .5em;
padding: 0;
background-color: #FFF;
overflow: hidden;
text-align: left;
}
.flx {
flex: 1 0;
}
.note {
background: #fff3d4;
padding: 1em;
margin: .5em;
font: .8em sans-serif;
text-align: left;
flex: none;
}
.overlay { padding: .5em; }
@keyframes slidein {
from { transform: scaleX(0); }
to { transform: scaleX(1); }
}
.a1 { animation: 3s ease-in 1s 2 reverse both paused slidein; }
.a2 { animation: 3s linear 1s slidein; }
.a3 { animation: 3s slidein; }
.animation {
background: #3F87A6;
width: 100%;
height: calc(100% - 1.5em);
transform-origin: left center;
}
window.addEventListener('load', function () {
var ANIMATION = Array.from(document.querySelectorAll('.animation'));
var BUTTON = Array.from(document.querySelectorAll('button'));
function toggleButton (btn, type) {
btn.classList.remove('play', 'pause', 'restart');
btn.classList.add(type);
btn.title = type.toUpperCase(type);
}
function playPause (i) {
var btn = BUTTON[i];
var anim = ANIMATION[i];
if (btn.classList.contains('play')) {
anim.style.animationPlayState = 'running';
toggleButton(btn, 'pause');
} else if (btn.classList.contains('pause')) {
anim.style.animationPlayState = 'paused';
toggleButton(btn, 'play');
} else {
anim.classList.remove('a' + (i + 1));
setTimeout(function () {
toggleButton(btn, i === 0 ? 'play' : 'pause');
anim.style.animationPlayState = '';
anim.classList.add('a' + (i + 1));
}, 100)
}
}
ANIMATION.forEach(function (node, index) {
node.addEventListener('animationstart', function () { toggleButton(BUTTON[index], 'pause'); });
node.addEventListener('animationend', function () { toggleButton(BUTTON[index], 'restart'); });
});
BUTTON.forEach(function (btn, index) {
btn.addEventListener('click', function () { playPause(index); });
});
})
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.
Quantum CSS notes
- Gecko has a bug whereby when you animate an offscreen element onscreen but specify a delay, Gecko does not repaint on some platforms, e.g. Windows (bug 1383239). This has been fixed in Firefox's new parallel CSS engine (also known as Quantum CSS or Stylo, planned for release in Firefox 57).
- Another Gecko bug means that
<details>elements can't be made open by default using theopenattribute if they have an animation active on them (bug 1382124). Quantum CSS fixes this. - A further bug means that animations using em units are not affected by changes to the
font-sizeon the animated element's parent, whereas they should be (bug 1254424). Quantum CSS fixes this.
See also
- Using CSS animations
- JavaScript
AnimationEventAPI