Detailed explanation of Transition property in CSS3 and sharing of examples_CSS/HTML

1. Syntax of transition-property
[css]
transition-property: all (all attributes change) || [attr] (specify the style to be moved)|| none(no attribute changes)

　2. Attribute value of transition-property
　(1)none: The transition will stop executing immediately
　(2)all: The transition effect will be executed when any attribute value of the element changes
　(3)attr : Specify the style to be moved

1. Transition-property——Specify the style to be moved

　1. The syntax of transition-property
[css]
transition-property: all (all attributes changed) || [attr] (specify the style to be moved) || none (no attributes changed)

　2. Attribute value of transition-property
　(1)none: The transition will stop executing immediately
　(2)all: The transition effect will be executed when any attribute value of the element changes
　(3)attr : Specify the style to be moved

2. Transition-duration
Transition-duration is the duration of the specified element conversion process, in seconds (s). transition-duration can act on all elements, including :before and :after

Pseudo element. Its default value is 0, which means the transformation is immediate.

3. Transition-delay - delay time
Transition-delay is used to specify the time when an animation starts to execute, that is, how long it takes to start executing after changing the element attribute value. transition effect, unit is s (second)

, its use is very similar to transition-duration, and can also be applied to all elements, including :before and :after pseudo-elements. The default size is "0", which means the transformation is executed immediately,

No delays.

IV. Transition-timing-function - Specify the form of motion
Transition-timing-function: ease (gradually slows down) | linear (constant speed) | ease-in (accelerates) | ease-out (deceleration) | ease-in-out (accelerate first and then decrease

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

Five. Comprehensive writing method of transition
[css]
Element selector {transition: motion style, duration, motion form, delay time;}

6. Comprehensive and compatible writing method of transition

　1. Mozilla kernel
[css]
Element selector {-moz-transition: motion style, duration, motion form, delay time;}

　2. Webkit kernel
[css]
Element selector {-webkit-transition: motion style, duration, motion form, delay time;}

　3. Opera kernel
[css]
Element selector {-o-transition: motion style, duration, motion form, delay time;}

　4. W3C standard
[css]
Element selector {transition: motion style, duration, motion form, delay time;}

Example effect:

Copy code The code is as follows:

a{transition:all .6s ease-in-out;-webkit-transition:all .6s ease-in-out;-moz-transition:all .6s ease-in-out;-o-transition:all .6s ease-in-out;-ms-transition:all .6s ease-in-out;}