Table of Contents
Introduction
CSS animations allow you to create dynamic and engaging effects or animations on your website. Here are some of the properties you can use when working with CSS animations:
CSS Animations Properties
The list below illustrates the properties used for creating animations along with examples on how to use them in CSS.
animation-name
This property is used to specify the name of the @keyframes animation to apply to the element. Value: any valid string
.example {
animation-name: example-animation;
}
@keyframes example-animation {
/* animation keyframes */
}In the example above, the animation with name “example-animation” is applied to the element with the class “example“.
animation-duration
This property is used to specify the length of time that the animation should take to complete one cycle. Value: any number with s at the end (example below)
.example {
animation-duration: 2s;
}In the example above, we are specifying 2s as the duration meaning that the animation will take 2 seconds to complete one cycle.
animation-iteration-count
This property specifies the number of times the animation should be played. The values could be any number, initial, inherit or infinite.
.example {
animation-iteration-count: 3;
}In the example above, we are specifying the animation to play for 3 times.
animation-timing-function
This property specifies the speed curve of the animation. The values could be linear, ease, ease-in, ease-out, ease-in-out, initial, inherit or cubic-bezier() function.
.example {
animation-timing-function: ease-in-out;
}In the example above, the animation timing function is set to ease-in-out i.e., it will start slowly, speed up, and then end slowly.
animation-direction
This property specifies the direction for the animation. Values: normal, reverse, alternate, alternate-reverse, initial, inherit.
.example {
animation-direction: alternate;
}The example above has the direction of animation set to alternate. The animation will play on alternate cycles.
animation-delay
This property is used to specify the delay before the animation should start. Value: any number with s at the end (example below)
.example {
animation-delay: 2s;
}The animation will start 2seconds after the page load when the animation-delay is set to 2s.
animation-fill-mode
This property specifies the styling for the element before and after the animation. Values: none, forwards, backwards, both, initial, inherit
.example {
animation-fill-mode: forwards;
}The animation-fill-mode set to forwards will retain the styles that is set by the last keyframe depending on animation-direction and animation-iteration-count.
animation-play-state
This property specifies whether the animation is running or paused. Values: paused, running, initial, inherit
.example {
animation-play-state: paused;
}In the example above, the animation on the element with the class “example” will be paused.
Shorthand Property
We can also use the shorthand property animation to specify all the above properties in one line.
.example {
animation: example-animation 2s ease-in-out 3s forwards paused;
}In the example above, we are applying the “example-animation” animation for 2 seconds using the “ease-in-out” timing function, with a delay of 3 seconds, after the animation is completed, the animation will retain the end state (notice forwards) and it is in paused state.