CSS Animation Properties
To make an animation work, you must bind it to an element using CSS animation properties.
There are several properties used specifically to control how an animation plays. Below is a list of all the individual animation properties you can apply to an element.
| Property | Description |
|---|---|
animation-name |
Specifies the name of the @keyframes animation that should be applied to the selected element. |
animation-duration |
Defines how long an animation should take to complete one cycle (e.g., 2s or 500ms). |
animation-timing-function |
Specifies the speed curve of the animation (e.g., linear, ease, ease-in-out). |
animation-delay |
Specifies a delay before the animation starts. Positive values delay that start; negative values cause the animation to begin immediately, but partway through its cycle. |
animation-iteration-count |
Specifies the number of times an animation should run. It can be a number or the keyword infinite. |
animation-direction |
Specifies whether an animation should play forward, backward, or alternate back and forth (e.g., normal, reverse, alternate). |
animation-fill-mode |
Specifies a style for the element when the animation is not playing (before it starts, after it ends, or both). E.g., forwards keeps the final state. |
animation-play-state |
Specifies whether the animation is playing or paused. |
Example: Combining Properties
Here is an example that uses multiple animation properties to create a continuous, alternating bounce effect that starts after a 1 second delay.
As you can see, declaring each property individually can take up a lot of space. In the next section, we'll look at how to combine these into a single shorthand property.