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

Print Page