What is the transition of Transition?
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.
