animation-duration - HTML CSS CSS Property

HTML CSS examples for CSS Property:animation-duration

  1. HOME
  2. HTML CSS
  3. CSS Property
  4. animation-duration

Description

The animation-duration CSS property sets the number of seconds (s) or milliseconds (ms) an animation should take to complete one cycle.

The following table summarizes the animation-duration Property.

Item Value
Default value: 0s
Applies to:All elements, ::before and ::after pseudo-elements
Inherited: No
Animatable: No.

Syntax

The syntax of the property is as follows: 


animation-duration:     time | initial | inherit

Property Values

The following table describes the values of this property.

Value Description
timeduration of an animation cycle. The default value is 0s. Negative values are invalid.
initial Sets this property to its default value.
inherit take the value of its parent element animation-duration property.

The example below shows the animation-duration property.

Demo Code

ResultView the demo in separate window 

<!DOCTYPE html>
<html lang="en">
 <head>
  <title>Example of CSS3 animation-duration Property</title>
  <style type="text/css">
.box {<!--from  w  w  w  .  j  a v a  2s  .c om-->
    width: 153px;
    height: 103px;
  margin: 50px;
    background: url("https://www.java2s.com/style/demo/Opera.png") no-repeat;
    position: relative;
    /* Chrome, Safari, Opera */
    -webkit-animation-name: moveit;
    -webkit-animation-duration: 2s;
    /* Standard syntax */
    animation-name: moveit;
    animation-duration: 2s;
}

/* Chrome, Safari, Opera */
@-webkit-keyframes moveit {
    from {left: 0;}
    to {left: 50%;}
}

/* Standard syntax */
@keyframes moveit {
    from {left: 0;}
    to {left: 50%;}
}
</style>
 </head>
 <body>
  <div class="box"></div>
  <p><strong>Note:</strong> Click the "Show Output" button to repeat the animation.</p>
 </body>
</html>

Related Tutorials