How to use the transition-property attribute in css
Xiaobian to share with you how to use the transition-property attribute in css, I believe most people still do not know how to use it, so share this article for your reference, I hope you have a lot of harvest after reading this article, let's go to understand it together!
CSS3transition-property Properties
Effects: The transition-property specifies the name of the CSS property to which the transition effect applies. (The transition effect starts when the specified CSS property changes).
Tip: Transition effects typically occur when the user floats the mouse pointer over an element.
Grammar:
transition-property:none|all|property;
none: No attributes will receive transition effects.
All: All attributes will receive a transition effect.
Property: Defines a comma-separated list of CSS property names to which transition effects apply.
Note: You need to always set the transition-duration attribute, otherwise the duration is 0, and there will be no transition effect.
CSS3transition-property usage example
div
{
width:100px;
height:100px;
background:red;
margin:10px0px;
}
.demo1{
transition-property:width;
transition-duration:2s;
-moz-transition-property:width;/*Firefox4*/
-moz-transition-duration:2s;/*Firefox4*/
-webkit-transition-property:width;/*SafariandChrome*/
-webkit-transition-duration:2s;/*SafariandChrome*/
-o-transition-property:width;/*Opera*/
-o-transition-duration:2s;/*Opera*/
}
.demo2{
transition-property:height;
transition-duration:2s;
-moz-transition-property:height;/*Firefox4*/
-moz-transition-duration:2s;/*Firefox4*/
-webkit-transition-property:height;/*SafariandChrome*/
-webkit-transition-duration:2s;/*SafariandChrome*/
-o-transition-property:height;/*Opera*/
-o-transition-duration:2s;/*Opera*/
}
.demo1:hover
{
width:300px;
}
.demo2:hover
{
height:150px;
}
Move your mouse pointer over the red div element to see the transition effect.
The width attribute changes:
Height attribute changes:
Note: This example does not work in Internet Explorer.
The above is "how to use the transition-property attribute in css" all the contents of this article, thank you for reading! I believe that everyone has a certain understanding, hope to share the content to help everyone, if you still want to learn more knowledge, welcome to pay attention to the industry information channel!
