Animation duration property (animation-duration)

The animation-duration property defines the duration of one automation cycle, and it is set as seconds or milliseconds. If multiple times are specified, they’re applied to the animations in the same order as listed for animation-name.

Syntax:

selector {

animation-duration: time | initial | inherit;

}

Values:

The following values may be assigned to animation-duration property:

time; As mentioned the time is set in seconds or milliseconds and it defines the time of one automation cycle. The default value is 0.
initial, inherit

Example

The example with the automation-duration property:

<!DOCTYPE html>
<html>
<head>
<style type="text/css">
body {
    background-color:#eee;
}
div {
    position: relative; top:30px; left:5%;
    width: 80%; height: 50px; padding:5% 5% 0;
    animation: animation_duration 8s infinite;
        /* ADD proprietary selectors if needed */
}
@keyframes animation_duration {
    0% { background-color: rgba(0,204,0,0); }
    50% { background-color: rgba(0,204,0,.3); }
    }
}
</style>
</head>
  
<body>

<h3>CSS3 animation-duration property example:</h3>

<div>This box is going transparent...</div>

</body>
</html>

›› go to examples ››

Animation duration property (animation-duration)

Syntax:

Values:

Example

The example with the automation-duration property:

Comments

About

Contact

Get Connected