CSS3 Transition-Ground tornado

0. Environmental preparedness

　　(1) The transition requires browser support, using these attributes to add browser vendor prefix, I use the chrome49 no longer need to prefix,

-o-opera

-webkit-safari, Chrome

-moz-firefox

-ms-ie

(2) CSS

P

{

height:15px; / * Similar to the height of this property, you must explicitly specify the value * /

　　　　

}

P:hover/* Initial p:hover*/

{

　　　　

height:100px;

}

(3) HTML file body part

<p></p>

1. Quick Use

Add the following attribute to the initial p:hover

transition:background 2s linear 1s,height 1s linear 1s;

2. Detailed

　　(1) individual designation, attribute explanation

Add the following attribute to the initial p:hover

Transition-property:height,background-color;

Transition-duration:1s,2s;

Transition-timing-function:linear;

Transition-delay:1000ms,1s;

Transition-property specify which properties to change

Not recommended to write all, the rules are difficult to fathom

Transition-duration height from execution to end is 1s,background-color from execution to end is 2s,height change ends, background-color change ends with 1s left

Write only one value, then all properties apply this value, in addition, let the number of transition-duration values equal to the number of transition-duration values

Transition-timing-function:linear The law of change, please find it yourself

Write only one value, then all properties apply this value, in addition, let the number of transition-timing-function values equal to the number of Transition-property values

Transition-delay:1000ms,1s;height begins to change after 1s, where background-color and height begin to change at the same time

Write only one value, then all properties apply this value, in addition, let the number of transition-delay values equal to the number of Transition-property values

These properties can only occur once, otherwise the following overrides the previous

(2) Comprehensive use

Add the following attribute to the initial p:hover

transition:background 2s linear 1s,height 1s linear 1s;

<transition-property><transition-duration><transition-timing-function><transition-delay >

<> Optional parameters, please write all

These properties can only occur once, otherwise the following overrides the previous

*transition and other sub-written transitions are also covered, and the back covers the front

CSS3 Transition-Ground tornado