Shulou(Shulou.com)06/01 Report--

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!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.