CSS animation-duration Property
The Animation-duration property defines in what time the animation takes one cycle. See some examples and try them yourself.
The animation-duration property defines the length of time (in seconds or milliseconds) that an animation takes to complete one cycle. Very often the animation shorthand property is used to set all animation properties at once. The default value for the animation-duration property is 0s, which means that the animation completes instantly and the keyframes have no visible effect. Negative values are invalid and cause the property to be ignored. However, some earlier implementations may treat them as equal to 0s.
When multiple comma-separated values are specified for any animation property, they are applied in order to the corresponding animations defined in animation-name. If there are more values than animation names, the values wrap around to the beginning.
The animation-duration property is one of the CSS3 properties.
| Initial Value | 0s |
|---|---|
| Applies to | All elements, ::before and ::after pseudo-elements. |
| Inherited | No. |
| Animatable | No. |
| Version | CSS3 |
| DOM Syntax | object.style.animationDuration = "4s"; |
Syntax
Syntax of CSS animation-duration Property
animation-duration: time | initial | inherit;Example of the animation-duration property:
Example of CSS animation-duration Property with seconds
<!DOCTYPE html>
<html>
<head>
<style>
.element {
padding: 50px;
animation: pulse 7s infinite;
}
@keyframes pulse {
0% {
background-color: #8ebf42;
}
50% {
background-color: #1c87c9;
}
100% {
background-color: #eee
}
}
</style>
</head>
<body>
<div class="element">Background of this text is animated using CSS3 animation property</div>
</body>
</html>Example of the animation-duration property having duration of 6 seconds:
Example of CSS animation-duration Property with 6 seconds
<!DOCTYPE html>
<html>
<head>
<style>
html,
body {
height: 100%;
margin: 0;
}
body {
display: flex;
align-items: center;
justify-content: center;
}
.element {
height: 200px;
width: 200px;
background-color: #1c87c9;
animation: nudge 6s ease infinite alternate, nudge 6s linear infinite alternate;
}
@keyframes nudge {
0%,
100% {
transform: translate(0, 0);
}
60% {
transform: translate(150px, 0);
}
80% {
transform: translate(-150px, 0);
}
}
</style>
</head>
<body>
<div class="element"></div>
</body>
</html>Values
| Value | Description | Play it |
|---|---|---|
| time | Specifies the length of time an animation takes to complete one cycle. Values can be specified in seconds (s) or milliseconds (ms). Note that the default value for the property itself is 0s, not the time keyword. | Play it » |
| initial | It makes the property use its default value. | |
| inherit | It inherits the property from its parent element. |
Practice
What is the role of the CSS animation-duration property and how is it specified?