Transition attributes in CSS3 and sample sharing _css/html

1, the Transition-property grammar
[CSS]
Transition-property:all (all attributes changed) | | [attr] (Specifies the style to be sporty) | | None (no property change)

2, Transition-property value of the property
(1) none:transition immediately stop execution
(2) All: The element produces any property value changes will perform the transition effect
(3) attr: Specifies the style to be moving

transition-property--Specifies the style you want to move

1, the Transition-property grammar
[CSS]
Transition-property:all (all attributes changed) | | [attr] (Specifies the style to be sporty) | | None (no property change)

2, Transition-property value of the property
(1) none:transition immediately stop execution
(2) All: The element produces any property value changes will perform the transition effect
(3) attr: Specifies the style to be moving

Second, transition-duration
Transition-duration is the duration of the specified element conversion process in seconds (s). Transition-duration can be used for all elements, including: Before and: After

Pseudo element. The default value is 0, which means that the transform is instantaneous.

Third, transition-delay--delay time
Transition-delay is used to specify when an animation begins to execute, that is, how long the transition effect starts when the value of an element property is changed, in S (seconds)

, which is extremely similar to transition-duration and can be used for all elements, including: Before and: after pseudo elements. The default size is "0", which means that the transform executes immediately,

No delay.

Iv. transition-timing-function--designated Movement form
Transition-timing-function:ease (slowly slowing) | Linear (Uniform) | Ease-in (Accelerated) | Ease-out (deceleration) | Ease-in-out (Accelerate and subtract first)

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

The comprehensive writing of transition
[CSS]
Element Selector {transition: Motion style duration motion form delay time;}

Six, transition comprehensive compatible writing

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 core
[CSS]
Element Selector {-o-transition: Motion style duration motion form delay time;}

4. The standard of the Consortium
[CSS]
Element Selector {transition: Motion style duration motion form delay time;}

Instance effect:

Copy Code code 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;