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

This article is about the usefulness of the transition-duration attribute in css3. The editor thinks it is very practical, so share it with you as a reference and follow the editor to have a look.

CSS3transition-duration attribute

What it does: the transition-duration attribute specifies the time (in seconds or milliseconds) it takes to complete the transition effect.

Syntax:

Transition-duration:time

Parameters:

Time: specifies the time (in seconds or milliseconds) it takes to complete the transition effect. The default value is 0, which means there will be no effect.

Note: InternetExplorer9 and earlier browsers do not support the transition-duration attribute; InternetExplorer10, Firefox, Opera, and Chrome support the transition-duration attribute. Safari supports the alternative-webkit-transition-duration attribute.

An example of using the CSS3transition-duration attribute

Div

{

Width:100px

Height:100px

Background:red

Margin:10px0px

}

.demo1 {

Transition-duration:2s

/ * Firefox4*/

-moz-transition-property:width

-moz-transition-duration:2s

/ * SafariandChrome*/

-webkit-transition-property:width

-webkit-transition-duration:2s

/ * Opera*/

-o-transition-property:width

-o-transition-duration:2s

}

.demo2 {

Transition-duration:5s

/ * Firefox4*/

-moz-transition-property:width

-moz-transition-duration:5s

/ * SafariandChrome*/

-webkit-transition-property:width

-webkit-transition-duration:5s

/ * Opera*/

-o-transition-property:width

-o-transition-duration:5s

}

.demo1: hover,.demo2:hover

{

Width:300px

}

Please move the mouse pointer over the red div element to see the transition effect.

2 second transition:

5 second transition:

Note: this example is not valid in InternetExplorer.

Thank you for reading! This is the end of this article on "what is the use of transition-duration attributes in css3?". I hope the above content can be of some help to you, so that you can learn more knowledge. if you think the article is good, you can share it for more people to see!

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.