What is the use of the transition-duration attribute in css3
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!
