Use of the Transition property of the CSS3

Transition is an animation effect that smoothly transitions an attribute from one property value to another for a specified period of time.
This property is typically paired with: hover

Here is an example: the mouse on the Div, 0.2s after the background color of the div element with a second time into yellow, the change is linear

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

< Div > Dr. Sisi </div>

Before the mouse is put up:

Mouse on the 0.2s after the change process:

The final effect of the mouse put up:

See here everyone on the use of this attribute, the heart should have a bottom.

For this property, each parameter has a corresponding property name, which means that the property can be disassembled.

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;}