Animation Shorthand Property
Last updated: 2026-09-13
animation Animation Shorthand Property
The animation property is a shorthand for animation-name, animation-duration, animation-timing-function, animation-delay, animation-iteration-count, animation-direction, animation-fill-mode, and animation-play-state. Combined with @keyframes, it defines multi-stage, looping, pausable animation sequences. Unlike transition, animation plays automatically with no trigger, making it ideal for loaders, carousels, breathing effects, and other continuous visuals.
| Category | |
|---|---|
| Initial Value | none |
| Inherited | No |
| Applies To | all |
| Animation Type | discrete |
| CSS Version | CSS3 |
| Status | Standard |
📝 Syntax
animation: [ none | <single-animation> ]#;
/* <single-animation> = <time> || <easing-function> || <time> || <single-animation-iteration-count> || <single-animation-direction> || <single-animation-fill-mode> || <single-animation-play-state> || [ none | <keyframes-name> ] */⚙️ Values
| Value | Type | Description |
|---|---|---|
<single-animation># | Value | Animation shorthand: name, duration, timing function, delay, iteration count, direction, fill mode, play state |
▶ Example
Edit the code below and see the live result in the playground:
🌐 Browser Support
| Browser |  Chrome |
 Edge |
 Firefox |
 Safari |
 Opera |
|---|---|---|---|---|---|
| animation | ✓ v43 | ✓ v12 | ✓ v16 | ✓ v9 | ✓ v30 |
| Supported in all major browsers | |||||
Tip： The order of the values is not significant, but the first value that parses as a time is the duration and the second is the delay. Avoid a keyframe name that collides with a keyword.
Important： If the animation shorthand does not include an animation-name, the whole declaration is invalid. It is generally recommended to include the name inside the shorthand to make sure the animation actually runs.
❓ FAQ
QCan a CSS animation be paused mid-way and then resumed again?
AYes. Set animation-play-state: paused to pause and running to resume. The most common pattern is pairing it with :hover so the animation pauses while the mouse is over the element. While paused, the animation stays on its current frame, and when resumed it continues from exactly where it left off.
QHow do I make an animation play once and stop on the last frame?
AUse animation-fill-mode: forwards, which keeps the element at its final keyframe after the animation ends, and set animation-iteration-count to 1. If you also want the element to hold its initial state before the animation starts, use animation-fill-mode: both. This is the standard way to run a one-shot entrance or reveal animation.
QIn the animation shorthand, which time is duration and which is delay?
AThe first value that parses as a time is the duration and the second is the delay. In animation: bounce 1.5s 0.5s ease, 1.5s is the playback duration and the animation starts after a 0.5s delay. When only one time is given, it is the duration and the delay defaults to 0s. Mixing these two times up is the most common shorthand mistake.
QMy CSS animation is choppy and drops frames. How do I make it smoother?
AAnimate only transform and opacity, and avoid animating width, height, filter, or other properties that force reflow and repaint on every frame. Add will-change to the animated element so a compositor layer is created in advance, and use absolute positioning to take it out of the document flow. A negative animation-delay skips the beginning and jumps straight into the middle.
🏷️ Related Properties
💡 Related Cases
📚 Related Tutorials
