Network Security Internet Technology Development Database Servers Mobile Phone Android Software Apple Software Computer Software News IT Information

In addition to Weibo, there is also WeChat

Please pay attention

WeChat public account

Shulou

How to use the transition-property attribute in css

2025-01-31 Update From: SLTechnology News&Howtos shulou NAV: SLTechnology News&Howtos > Development >

Share

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.

Views: 280

*The comments in the above article only represent the author's personal views and do not represent the views and positions of this website. If you have more insights, please feel free to contribute and share.

Share To

Development

Wechat

© 2024 shulou.com SLNews company. All rights reserved.

12
Report