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

What is the concept of transition in css3

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

Share

Shulou(Shulou.com)05/31 Report--

Today, the editor will share with you the relevant knowledge of what the concept of transition is in css3. The content is detailed and the logic is clear. I believe most people still know too much about this knowledge, so share this article for your reference. I hope you can get something after reading this article. Let's take a look at it.

Transition in css3 means "transition" and is an attribute used to set the transition effect of an element; this attribute is an abbreviated attribute that can add a transition animation effect to the element, and the parameters can be used to set the relevant operations of the transition animation. The syntax is "transition: attribute name time-velocity curve delay time".

The operating environment of this tutorial: windows10 system, CSS3&&HTML5 version, Dell G3 computer.

What does transition mean in css3

Transition means transition in css3.

The transition attribute sets the element when the transition effect

The four abbreviated properties are:

Transition-property

Transition-duration

Transition-timing-function

Transition-delay

The syntax is:

Transition: property duration timing-function delay

The parameters are as follows:

Examples are as follows:

123 div {width:100px;height:100px;background:red;transition:width 2s; / * Safari * /} div:hover {width:300px;}

Note: this instance does not work on Internet Explorer 9 and earlier IE versions.

Move the mouse over the div element to see the transition effect.

Output result:

These are all the contents of the article "what is the concept of transition in css3". Thank you for reading! I believe you will gain a lot after reading this article. The editor will update different knowledge for you every day. If you want to learn more knowledge, please 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: 0

*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