Introduction to the new transition attribute in CSS3 (attached example)

This article brings to you the content is about the new transition attribute of the introduction of CSS3 (attached to the example), there is a certain reference value, the need for friends can refer to, I hope to help you.

A new module, transition, has been added to the CSS3, which can trigger the appearance of elements with some simple CSS events to make the effect appear more subtle.
It is a composite property that mainly includes the following sub-properties.

Transition-property: Specifying CSS properties for staging or dynamic impersonation
Transition-duration: Specify the time required to complete the transition
Transition-timing-function: Specifying a transition function
Transition-delay: Specify the delay time to start appearing

Such as:

Transition:background-color. 5s ease. 1s;

Special note: When the "Transition-property" property is set to all, the attribute for all midpoint values is represented.

Example:

width:200px;  height:200px;  background:red;  margin:20px Auto;  -webkit-transition-property:width;  Transition-property:width;  -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;

You can also make individual settings for a property.