CSS - animation-duration Property
CSS animation-duration property defines how long an animation takes to complete a single cycle.
Syntax
animation-delay: time | initial | inherit;
Property Values
| Value | Description |
|---|---|
| time | Specified in seconds(s) or milliseconds(s). This specifies the length that an animation needs to complete a cycle. |
| initial | This sets the property to its initial value |
| inherit | This inherits the property from the parent element |
Examples of CSS animation-duration Property
Below listed examples will illustrate the animation duration property with different values.
Setting Animation Duration
The following examples demonstrates how to create a simple animation with a specified duration using the animation-duration property.
Animation Duration with 0s
When the duration of the animation-duration property is set to 0s, no animation occurs. In the following example, the considered red box remains stationary as the duration is set to 0s
Example
<!DOCTYPE html>
<html>
<head>
<style>
.box {
width: 100px;
height: 100px;
background-color: red;
position: relative;
animation-name: move;
animation-duration: 0s;
animation-iteration-count: infinite;
animation-direction: alternate;
}
@keyframes move {
0% {
left: 0;
}
100% {
left: 400px;
}
}
</style>
</head>
<body>
<h2>CSS Animation Duration Property</h2>
<div class="box"></div>
</body>
</html>
Positive Animation Duration
When the duration of the animation-duration property is set to a positive value, the animation takes that much time to complete one cycle. In the considerd example, the red box takes 5s to complete one cycle.
Example
<!DOCTYPE html>
<html>
<head>
<style>
.box {
width: 100px;
height: 100px;
background-color: red;
position: relative;
animation-name: move;
animation-duration: 10s;
animation-iteration-count: infinite;
animation-direction: alternate;
}
@keyframes move {
0% {
left: 0;
}
100% {
left: 400px;
}
}
</style>
</head>
<body>
<h2>CSS Animation Duration Property</h2>
<div class="box"></div>
</body>
</html>
Supported Browsers
| Property |  |
 |
 |
 |
 |
|---|---|---|---|---|---|
| animation-duration | 43.0 | 10.0 | 16.0 | 9.0 | 30.0 |
Advertisements