In this tutorial, we are going to learn about animation-duration.

So, what is animation-duration?

The animation-duration property specifies how many seconds or milliseconds an animation takes to complete one cycle.

This property has a syntax: animation-duration: time | initial | inherit ;

Property Values time – it specifies the length of time an animation takes to finish. The default value is equal to 0s.

initial – it specifies that the value of the property should be set to the default value.

inherit – it specifies that the value of the property should be inherited from the parent element.

Example – This example shows the use of the animation-duration property in a three (3) different value of time.

CSS Source Code:

<style type="text/css">
div.animation {width:60px;height:50px;color:white;padding:2px;background:blue;position:relative;}
div.animation1 {width:60px;height:50px;color:white;padding:2px;background:red;position:relative;}
div.animation2 {width:60px;height:50px;color:white;padding:2px;background:green;position:relative;}
#test1 {animation-name:boxmove;animation-duration:5s;animation-iteration-count:infinite;/* Firefox */
-moz-animation-name:boxmove;-moz-animation-duration:5s;-moz-animation-iteration-count:infinite;/* Safari and Google Chrome */
-webkit-animation-name:boxmove;-webkit-animation-duration:5s;-webkit-animation-iteration-count:infinite;}
#test2 {animation-name:boxmove;animation-duration:10s;animation-iteration-count:infinite;/* Firefox */
-moz-animation-name:boxmove;-moz-animation-duration:10s;-moz-animation-iteration-count:infinite;/* Safari and Google Chrome */
-webkit-animation-name:boxmove;-webkit-animation-duration:10s;-webkit-animation-iteration-count:infinite;}
#test3 {animation-name:boxmove;animation-duration:15s;animation-iteration-count:infinite;/* Firefox */
-moz-animation-name:boxmove;-moz-animation-duration:15s;-moz-animation-iteration-count:infinite;/* Safari and Google Chrome */
-webkit-animation-name:boxmove;-webkit-animation-duration:15s;-webkit-animation-iteration-count:infinite;}
@keyframes boxmove
{from {left:0px;}
to {left:210px;}
}
@-moz-keyframes boxmove /* Firefox */
{from {left:0px;}
to {left:210px;}
}
@-webkit-keyframes boxmove /* Safari and Google Chrome */
{from {left:0px;}
to {left:210px;}
}
</style>

The complete code.

CSS3 animation-duration

 

5s duration

 

10s duration

 

15s duration

LEAVE A REPLY

Please enter your comment!
Please enter your name here

eight + two =