Use of css3 transition attribute_html/css_WEB-ITnose

Transition is to smoothly transition an attribute from one attribute value to another within a specified time to achieve animation effects.
This attribute is generally used with: hover

Let’s look at an example: Place the mouse on a div, and after 0.2 seconds, the background color of the div element will change to yellow in one second. The change method is linear

1 div{ background-color:red; transition:background-color 1s linear 0.2s;}2 div:hover{ background-color:yellow;}

<div>思思博士</div>

Before the mouse was placed:

The change process 0.2s after the mouse was placed:

The final effect when the mouse is placed on it:

Seeing how everyone uses this attribute here, you should have a good idea.

For this attribute, each parameter has a corresponding attribute name, which means that this attribute can be split and written.

Non-abbreviated form:

1 /*div{ background-color:red; transition:background-color 1s linear 0.2s;}*/2 div{background-color:red; transition-property:background-color; transition-duration:1s; transition-timing-function:linear; transition-delay:0.2s}3 div:hover{ background-color:yellow;}

Transition can also transition multiple effects. 🎜>

1 div{ background-color:red; color:black; height:50px; transition:background-color 1s linear,color 1s linear,height 1s linear;}2 3 div:hover{ background-color:yellow; color:#F00; height:100px;}