How to use transition in css3

This article mainly introduces "how to use transition in css3". In daily operation, I believe many people have doubts about how to use transition in css3. The editor consulted all kinds of materials and sorted out simple and easy-to-use operation methods. I hope it will be helpful for you to answer the doubts about "how to use transition in css3". Next, please follow the editor to study!

In css3, the transition attribute transition is used to set the element transition effect, which is an abbreviated attribute, the syntax "transition:property duration timing-function delay", and the attribute value sets the attribute name, time, speed and delay time of the element transition.

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

What is the use of transition in css3

In css, the transition attribute is transition, which is used to set the transition effect of the element.

The transition attribute sets the element as a transition effect, and the four abbreviated attributes are:

Transition-property

Transition-duration

Transition-timing-function

Transition-delay

They fenbie set the attribute name, transition time, transition speed curve, and transition delay time of the element transition effect.

The syntax is:

Transition: property duration timing-function delay

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:

At this point, the study on "how to use the transition in css3" is over. I hope to be able to solve your doubts. The collocation of theory and practice can better help you learn, go and try it! If you want to continue to learn more related knowledge, please continue to follow the website, the editor will continue to work hard to bring you more practical articles!