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

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!

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.