CSS Animation: Properties Cheat Sheet

Here is the updated CSS animation properties cheat sheet with “Description” and “Possible values” bolded:

Property	Description and Possible Values
animation-name	Specifies the name of the @keyframes animation. Custom name, e.g. slideIn, fadeOut
animation-duration	Defines how long the animation takes to complete. Time values, e.g. 2s, 500ms
animation-timing-function	Controls the speed curve of the animation over time. linear, ease, ease-in, ease-out, ease-in-out, cubic-bezier(...)
animation-delay	Delay before the animation starts. Time values, e.g. 1s, 200ms
animation-iteration-count	Number of times the animation repeats. Number or infinite
animation-direction	Direction in which the animation plays. normal, reverse, alternate, alternate-reverse
animation-fill-mode	Defines style applied before/after animation. none, forwards, backwards, both
animation-play-state	Controls whether the animation is running or paused. running, paused

Shorthand & Properties Order

In the shorthand animation property, only the animation-name and animation-duration are required. The rest are optional. The only property that must appear in a specific order is animation-duration, which must come before animation-delay (if used), as both are duration values. All other properties can be arranged in any order without affecting their interpretation.

It is recommended however to follow this conventional order, to improve readability and maintainability:

1. animation-name
2. animation-duration
3. animation-timing-function
4. animation-delay
5. animation-iteration-count
6. animation-direction
7. animation-fill-mode
8. animation-play-state

Example of Common Usage:

animation: fadeOut 3s ease-in 1s infinite alternate forwards;

• fadeOut: animation-name
• 3s: duration
• ease-in: timing function
• 1s: delay
• infinite: iteration count
• alternate: direction
• forwards: fill mode