CSS Properties--transitions (transtion)

First introduce the value of the transition property:

Transition-property: The attributes of the participating transitions in the main settings object, including (Border-color,background-color,color)

Transition-duration: The duration of the primary set object transition

Transition-timing-function: Animation type that primarily sets the transition of an object

Transition-delay: Main Setting the time of the object delay transition

Understanding these properties, the transition is basically mastered, I usually use it in the production of navigation menu properties!

Now to understand the meaning of these few!

Like what:

　　

. test{

Transition:border-color. 5s ease-in. 1s,

Background-color. 5s ease-in. 1s,

Color. 5s ease-in. 1s;

}

What is the meaning? Let's split it up to see:

transition-property:border-color, background-color, color;//参与过渡的属性transition-duration:.5s, .5s, .5s;//对象过渡持续的时间transition-timing-function:ease-in, ease-in, ease-in;//对象过渡的动画类型transition-delay:.1s, .1s, .1s;//对象延迟过渡的时间
Note: If the other properties are the same, we can use the same parameter to represent it, for example, in addition to the Transiton-propperty three can write a value on it, as follows:

transition-property:border-color, background-color, color;transition-duration:.5s;transition-timing-function:ease-in;transition-delay:.1s;

Note: If all attributes, such as Transition-property, are required, and the other attribute parameters are the same, this can be said:

Transition:all. 5s ease-in. 1s;
This is the split:

transition-property:all;transition-duration:.5s;transition-timing-function:ease-in;transition-delay:.1s;

Now let's use an example to achieve the following.

<! DOCTYPE html>
This eliminates the use of JavaScript to control, this deserves attention to learn!
CSS Properties--transitions (transtion)