Detailed description of the Transition attribute in CSS3 and examples _ CSS/HTML

The Transition transition IN CSS3 has four central attributes: transition-property, transition-duration, transition-delay, and Transition-timing. 1. transition-property syntax
[Css]
Transition-property: all (all attribute changes) | [attr] (specify the style to be moved) | none (no attribute changes)

2. Value of transition-property
(1) none: transition stops execution immediately
(2) all: the element will execute the transition effect when any attribute value changes.
(3) attr: Specifies the style to be moved.

1. transition-property -- specify the style to be moved

1. transition-property syntax
[Css]
Transition-property: all (all attribute changes) | [attr] (specify the style to be moved) | none (no attribute changes)

2. Value of transition-property
(1) none: transition stops execution immediately
(2) all: the element will execute the transition effect when any attribute value changes.
(3) attr: Specifies the style to be moved.

Ii. transition-duration
Transition-duration is the duration of the element conversion process, in seconds ). Transition-duration can act on all elements, including: before AND: after

Pseudo element. The default value is 0, that is, it is real-time during transformation.

Iii. transition-delay -- delay Time
Transition-delay is used to specify the time when an animation starts to be executed, that is, how long after the element attribute value is changed to execute the transition effect, in seconds)

It is similar to transition-duration and can also act on all elements, including: before AND: after pseudo elements. The default size is "0", that is, the change is executed immediately,

No latency.

Iv. transition-timing-function -- specify the Motion Form
Transition-timing-function: Slow | linear (constant speed) | slow-in (acceleration) | slow-out (deceleration) | acceleration-in-out (acceleration first and then Subtraction

Speed) | cubic-bezr (this value allows you to customize a time curve) (number, number>)

V. Synthesis of transition
[Css]
Element selector {transition: the style duration of a motion ;}

Vi. Compatibility of transition

1. Mozilla Kernel
[Css]
Element selector {-moz-transition: the style duration of a motion ;}

2. Webkit Kernel
[Css]
Element selector {-webkit-transition: the style duration of a motion ;}

3. Opera Kernel
[Css]
Element selector {-o-transition: the style duration of a motion ;}

4. W3C standards
[Css]
Element selector {transition: the style duration of a motion ;}

Instance effect:

The Code is as follows:

A {transition: all. 6 s bytes-in-out;-webkit-transition: all. 6 s bytes-in-out;-moz-transition: all. 6 s bytes-in-out;-o-transition: all. 6 s queue-in-out;-ms-transition: all. 6 s bytes-in-out ;}