Detailed explanation of CSS3 transition-Escape Tornado

0.Environment preparation

　(1)Transition requires browser support. To use these attributes, you need to add the prefix of the browser manufacturer. The chrome49 I use no longer needs the prefix,

　 -o- Opera

　-webkit- Safari, Chrome

　-moz- Firefox

　-ms- IE

　(2) css

　p

　{

　　Height:15px;/*Similar to the height attribute, the value must be specified clearly*/

　　

　}

　p:hover/*Initial p:hover*/

　{

　　

　　height:100px;

　}

　(3)html file body part

　

1. Quick use

　Add the following attributes to the initial p:hover

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

2. Detailed explanation

　(1)Specify separately and explain the attributes in detail

　Add the following attributes to the initial p:hover

         transition-property:height,background-color;

          transition-duration:1s,2s;

         transition-timing-function:linear;

         transition-delay:1000ms,1s;

　Transition-property specifies the property that needs to be changed

It is not recommended to write all, the rules are difficult to grasp

transition-duration height takes 1s from execution to end, and background-color takes 2s from execution to end. After the height change ends, there is still 1s left after the background-color change ends

If you only write one value, this value will be applied to all attributes. In addition, please make the number of transition-duration values ​​equal to the number of transition-duration values ​​

transition-timing-function: linear; Please find the changing rules here

If you only write one value, this value will be applied to all properties. In addition, please make the number of transition-timing-function values ​​equal to the number of transition-property values ​​

transition-delay: 1000ms, 1s; height starts to change after 1s, here background-color and height start to change at the same time

If you only write one value, this value will be applied to all properties. In addition, please make the number of transition-delay values ​​equal to the number of transition-property values ​​

These attributes can only appear once, otherwise the later ones will overwrite the previous ones

(2) Comprehensive use

Add the following attributes to the initial p:hover

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

<>Optional parameters, please write them in full

These attributes can only appear once, otherwise the later ones will overwrite the previous ones

*transition and other transitions written separately are also overwritten, and the latter ones cover the previous ones