Detailed explanation of CSS3 transition- and css3 transition

Detailed explanation of CSS3 transition- and css3 transition

0. Prepare the environment

 

(1) transition requires the support of the browser. To use these attributes, you must add the browser vendor prefix. The chrome 49 I use does not require the prefix,

 

-O-Opera

 

-Webkit-Safari and Chrome

 

-Moz-Firefox

 

-Ms-IE

 

(2) css

 

P

{

Height: 15px;/* This attribute is similar to height. The value must be specified */

 

　　　　

}

P: hover/* initial p: hover */

{

 

　　　　

Height: 100px;

}

 

(3) html file body

 

<P> </p>

 

1. Quick Start

 

Add the following attributes to the initial p: hover

 

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

 

2. Detailed explanation

 

(1) specify and explain the attributes separately

 

Add the following attributes to the initial p: hover

Transition-property: height, background-color;

Transition-duration: 1 s, 2 s;

Transition-timing-function: linear;

Transition-delay: 1000 ms, 1 s;

Transition-property specifies the attribute to be changed

It is not recommended to write all, And the rules are hard to understand.

 

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

Write only one value, and apply this value to all attributes. In addition, set the number of transition-duration values to the number of transition-duration values.

 

Transition-timing-function: linear; the variation rule. Please find it here.

If only one value is written, this value is applied to all attributes. In addition, make the number of transition-timing-function values equal to the number of transition-property values.

 

Transition-delay: 1000 ms, 1 s; height changes after 1 s. Here, both background-color and height start to change.

If only one value is written, this value is applied to all attributes. In addition, set the number of transition-delay values to the number of transition-property values.

 

These attributes can only appear once. Otherwise

 

(2) Comprehensive use

 

Add the following attributes to the initial p: hover

 

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

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

<> Optional parameter. Please write it all

These attributes can only appear once. Otherwise

* Transition and other sub-write transitions are also covered, with the back covering the previous