What is the use of the animation-duration attribute in css
This article mainly introduces the use of the animation-duration attribute in css, has a certain reference value, interested friends can refer to, I hope you can learn a lot after reading this article, the following let Xiaobian take you to understand it.
CSS3animation-duration attribute
What it does: the animation-duration property defines how long it takes for an animation to complete a cycle, in seconds or milliseconds.
Syntax:
Animation-duration:time
Time: specify the time it takes to complete the animation. The default value is 0, which means there is no animation.
Note: the animation-duration attribute is not supported in InternetExplorer9 and earlier versions.
An example of using the CSS3animation-duration attribute
Div
{
Width:100px
Height:100px
Background:red
Position:relative
Animation:mymoveinfinite
Animation-duration:2s
/ * SafariandChrome*/
-webkit-animation:mymoveinfinite
-webkit-animation-duration:2s
}
@ keyframesmymove
{
From {top:0px;}
To {top:200px;}
}
@-webkit-keyframesmymove/*SafariandChrome*/
{
From {top:0px;}
To {top:200px;}
}
Note: the animation-name attribute is not supported in InternetExplorer9 and earlier versions.
Note: the animation-duration attribute is always specified, otherwise the animation will not be played if the duration is 0.
Thank you for reading this article carefully. I hope the article "what is the use of animation-duration attributes in css" shared by the editor will be helpful to you. At the same time, I also hope that you will support us and pay attention to the industry information channel. More related knowledge is waiting for you to learn!
