All-in-one animation spec
animation
![](/img/style/animation/animation.png)
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.
Property values
Some or all of the individual animation property values may be specified, in any order. If only one timing value is provided, it specifes the animation-duration
. In order to specify an animation-delay
, provide it as the second timing value.
Examples
animation: grow-height 3s ease-in 1s infinite reverse both running;
@keyframes grow-height {
from {
height: 0px;
}
to {
height: 100px;
}
}