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

Today, I would like to talk to you about what the transition of Transition is, many people may not know much about it. In order to make you understand better, the editor summarized the following content for you. I hope you can get something according to this article.

By transitioning to transition, web front-end developers can achieve simple animation interactions without the need for javascript. The transition attribute seems simple, but in fact it has a lot of details to pay attention to and easy to confuse. This article will introduce and sort out the knowledge about CSS transition.

Transition definition

Transition transition is a compound attribute, including four sub-attributes: transition-property, transition-duration, transition-timing-function, and transition-delay. Through the cooperation of these four sub-attributes to achieve a complete transition effect.

Transition-property: transition attribute (default is all)

Transition-duration: transition duration (default is 0s)

Transiton-timing-function: transition function (default is ease function)

Transition-delay: transition delay time (default is 0s)

[note] IE9- does not support this attribute, safari3.1-6, IOS3.2-6, android2.1-4.3 need to add-webkit- prefix; other high-version browsers support standard writing

Transition code

.test {

Height:100px

Width:100px

Background-color:pink

Transition-duration:3s

/ * the following three values are default values, which will be described in more detail later * /

Transition-property:all

Transition-timing-function:ease

Transition-delay:0s

}

.test: hover {

Width:500px

}

Copy the code

/ / move the mouse over the element, there will be a width change effect

After reading the above, do you have any further understanding of what the transition of Transition is? If you want to know more knowledge or related content, please follow the industry information channel, thank you for your support.

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.