CSS animation-duration Property

Specifies how many seconds or milliseconds it takes for an animation to complete.

Syntax

animation-duration: time |initial | inherit;

Example

<!DOCTYPE html>
<html>
<head>
<style>
.box {
    position: relative;
    width: 80px;
    height: 80px;
    background: #00ab55;
    animation: moveit infinite;
    animation-duration: 6s;
}

@keyframes moveit {
    from {left: 0;}
    to {left: 200px;}
}
</style>
</head>
<body>

<div class="box"></div>

</body>
</html>

Preview

Property Values

Value	Description
time	Specifies how long it should take an animation to complete one cycle. This can be expressed in either seconds or milliseconds. The default value is 0, which indicates that no animation will take place.
initial	Set this property's value to the default.
inherit	This attribute is inherited from its parent element.

Supported Browsers

Element	Chrome	Firefox	Safari	Edge / IE	Opera
animation-duration	43.0 3.0 -webkit-	16.0 5.0 -moz-	9.0 4.0 -webkit-	10.0	30.0 15.0 -webkit- 12.0 -o-

animation-direction

animation-fill-mode

CSS animation-duration Property

Syntax

Example

Property Values

Supported Browsers

Links

Tutorials

Connect with us