The CSS animation properties that control how a keyframe animation is applied and behaves on an element. it allows you to specify the animation’s duration, timing, how many times it repeats, whether it plays forward or backward, its state before and after execution, and more. While you can use the animation shorthand property to define several of these in one declaration, understanding each individual property is critical for fine-grained control.
animation-name
This property specifies the name of the @keyframes rule that defines the animation sequence you want to apply to an element. The name you use here must match the name you provided when defining the @keyframes rule. We recommend naming the animation based on its functionality, as you can reuse the same @keyframes rule on multiple elements. Specifications dictate that you should not quote the animation name. The value “none” prevents any animations from occurring on the element.
Example
.my-element {
animation-name: moveRight; /* References a keyframe rule named 'moveRight' */
}or
animation-name: appearDisappear;animation-duration
This property defines the length of time it takes for one complete cycle of the animation to finish. It is specified in seconds (s) or milliseconds (ms). A value of 0 or any negative number will prevent the animation from running, though 0s is often the default if not specified, which makes the animation imperceptible. It is considered required for an animation to be perceptible.
Example
.my-element {
animation-duration: 1.5s; /* The animation takes 1.5 seconds */
}or
animation-duration: 300ms;animation-timing-function
This property controls how the animation’s speed changes over its duration. It describes the acceleration curve of the animation. Possible values include keywords like ease, linear, ease-in, ease-out, ease-in-out, a cubic-bezier() function, or the steps() function. The default value is ease.
Example:
.my-element {
animation-timing-function: ease-in-out; /* Starts slow, speeds up, ends slow */
}or
animation-timing-function: linear;animation-delay
This property specifies a delay before the animation starts playing. It is defined in seconds (s) or milliseconds (ms). A default value of 0 means the animation starts immediately. A negative value is also allowed, which will cause the animation to start immediately but partway through its sequence as if it had already been playing for that duration. This can be used to stagger animations.
Example:
.my-element {
animation-delay: 1s; /* Wait 1 second before starting */
}or
animation-delay: 5s;animation-iteration-count
This property determines how many times an animation should repeat. It can be a positive number (including decimals, though decimals mean it ends partway through an iteration) or the keyword infinite for continuous looping. The default value is 1, meaning the animation plays once and stops. A value of 0 or any negative number prevents the animation from playing.
Example:
.my-element {
animation-iteration-count: 3; /* Play the animation 3 times */
}or
animation-iteration-count: infinite;animation-direction
This property controls whether the animation plays forward, backward, or alternates direction on each cycle.
- normal: The animation plays forward (from 0% to 100%) in each cycle. This is the default value.
- reverse: The animation plays backward (from 100% to 0%) in each cycle.
- alternate: The animation plays forward on the first cycle, backward on the second, forward on the third, and so on.
- alternate-reverse: The animation plays backward on the first cycle, forward on the second, and so on.
Example:
.my-element {
animation-direction: alternate; /* Play forward, then backward, etc. */
}or
animation-direction: alternate;animation-fill-mode
This property specifies what styles are applied to the element before the animation starts (during the animation-delay) and after the animation finishes. By default (none), animation styles are not applied outside of the animation’s active duration.
- none: The element’s styles return to their original state both before the delay and after the animation ends. This is the default.
- forwards: The element retains the computed values of the properties from the last keyframe (either 100% or 0% depending on animation-direction) after the animation completes.
- backwards: The element applies the computed values of the properties from the first keyframe (either 0% or 100% depending on animation-direction) during the animation-delay period.
- both: The element applies the styles from the first keyframe during the delay and retains the styles from the last keyframe after the animation finishes.
Example:
.my-element {
animation-fill-mode: both; /* Apply styles from 0% before starting and retain 100% styles after ending */
}or
animation-fill-mode: both;animation-play-state
This property allows you to pause or resume an animation.
- running: The animation is currently playing. This is the default state.
- paused:The animation is paused.
Example:
.my-element {
animation-play-state: paused; /* Pause the animation */
}or
animation-play-state: running;This property is sometimes gone in the animation shorthand.
You can apply multiple animations to a single element by providing a comma-separated list of values for these properties. By combining these properties with the @keyframes rule, you can create complex and dynamic animations in CSS.
CSS3 Topics