All-in-one animation spec


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.


animation: grow-height 3s ease-in 1s infinite reverse both running;

@keyframes grow-height {
from {
height: 0px;

to {
height: 100px;

style > animation > animationAll-in-one animation spec

🔗 🔎