CSS animation shorthand property is a comma-separated list of animation definitions, each of which combines animation properties into a single component value. Note that individual animation properties should be in order.
CSS property animation
| CSS version: | CSS 3 |
| Value: | [animation-name || animation-duration || timing-function || animation-delay || animation-iteration-count || animation-direction || animation-fill-mode || animation-play-state] [, ...]* |
| Initial: | see individual properties |
| Applies to: | all elements, ::before and ::after pseudo-elements |
| Inherited: | see individual properties |
Example – animation shorthand
<style>
@keyframes left-to-right {
0% {left:0;}
60% {left:200px;}
100% {left:200px;}
}
.box {
position: fixed;
background-color:lightgreen;
/* name, duration, timing-function, delay, iteration-count */
animation: left-to-right 4s linear 0s infinite;
}
</style>
<div class=box>Object</div>
