A detailed description of the transition attribute in CSS3

First, the grammar

Transition:property Duration timing-function Delay

The Transition property is a composite property, and she includes the following sub-properties:

• Transition-property: Specifies the name of the CSS property that sets the transition effect
• Transition-duration: Specifies how many seconds or milliseconds to complete the transition effect
• Transition-timing-function: Specify the transition function, which specifies the velocity curve of the speed effect
• Transition-delay: Specify the delay time to start appearing

The default values are: all 0 ease 0

Note: The Transition-duration duration is 0 and does not produce transitions

When changing the transition effect of multiple CSS properties:

a{ Transition: background 0.8s ease-in 0.3s,color 0.6s ease-out 0.3s;}

Second, sub-attributes

• Transition-property

Transition-property:none |all |property;

When none is true, no property has a transition effect, and all properties have a transition effect when the value is all, and the value applies a transition effect to the specified CSS property, with multiple attributes separated by commas

• Transition-duration

Transition-duration:time;

This property is primarily used to set the time it takes for a property to transition to another property, that is, the length of time it takes to transition from the old property to the new property, commonly known as duration

• Transition-timing-function

transition-timing-function:linear| ease| ease-in| Ease-out| Ease-in-out| Cubic-bezier (N,n,n,n);

This property refers to the "easing function" of the transition. It is used primarily to specify the transition speed of the browser and the progress of the operation during the transition, as explained below:

Note: The value cubic-bezier (n,n,n,n) can define its own values, such as Cubic-bezier (0.42,0,0.58,1)

Div{width:100px;Height:100px;Background-color:Orange;margin:20px Auto;Border-radius:100%;-webkit-transition-property:-webkit-border-radius;Transition-property:Border-radius;-webkit-transition-duration:3s;transition-duration:3s;-webkit-transition-timing-function:ease; transition-timing-function:ease; Div .:Hover {border-radius:0px;}

I try to change different values to see the difference, but it is not obvious that the duration of the long point estimate more can be seen, but because the GIF is too big to get up, so it took 3 seconds of time.

Ease: From fast to slow to slower

Linear: Constant speed

Ease-in: Getting Faster

Ease-out: More and more slowly

Ease-in-out: Accelerate and slow down first

• Transition-delay

This property has nothing to say, that is, the delay time before the transition effect starts, in seconds or milliseconds

One more chestnut:

Div{width:200px;Height:200px;background:Red;margin:20px Auto;-webkit-transition-property:background;Transition-property:background;-webkit-transition-duration:. 5s;transition-duration:. 5s;-webkit-transition-timing-function:ease-in;transition-timing-function:ease-in;-webkit-transition-delay:. 18s;Transition-delay:. 18s;}Div:hover{background:#000;}

A detailed description of the transition attribute in CSS3