32.CSS3 transition Effect

25th Chapter CSS3 Transition Effect

I. Brief introduction of the transition

         Transition effect is generally through some simple css action trigger smooth transition function, for example: hover focus ,: active : checked CSS3 provides transition property to achieve this transition, the main properties are as follows

Properties Description

Transition-property to specify CSS Properties for a transition or dynamic simulation

Transition-duration Set the time required to complete the transition

Transition-timing-function to make a transition function

Transition-delay Specify the delay time at which the transition begins to occur

Transition abbreviated form, according to the above four attributes ligatures

Second,Transition-property

first, the first property that sets a transition is the specified transition property. Transition-property Detailed properties are as follows

(1)None: no style specified

(2)all: Default value, specifies the style of the Transition-property attribute supported by the element

(3) specifying styles: Specifying styles that support Transition-property

as seen from the above,none is used to have a transition style in itself to cancel. While all supports all transition-property styles, there is also the designation transition-property Some of the styles in the.

the styles supported by Transition-property are:

Style name Style Type

Background-color color(colors)

Background-image only gradients(gradient)

Background-position percentage,length ( hundred percent, length value )

Border-bottom-color Color

Border-bottom-width length

Border-left-color Color

Border-left-width length

Border-right-color Color

Border-right-width length

Border-spacing length

Border-top-color Color

Border-top-width length

Border-width length

Bottom Length,percentage

Color color

Crop Rectangle

Font-size Length,percentage

·

·

·

Third,transition-duration

If you set the style individually, you cannot immediately achieve the effect, you must add the time required for the transition, because by default, the transition time is 0.

Set the transition time to 1 seconds, if half a second can be set to . 5s

Transition-duration:1s;

Iv.transition-timing-function

when the transition effect is running, for example, an easing effect is created. By default, the ease is: the element style transitions from the initial state to the terminating state from fast to slow, gradually slow, that is, ease is also the default value, several other easing methods are as follows:

(1)ease : Default value, the element style transitions from the initial state to the terminating state from fast to slow, slowly, to the same Bezier curve (0.25,0.1,0.25,1.0 )

(2)linear : The element style transitions from the initial state to the terminating state the familiar is constant speed, equal to the Bezier curve (0.0,0.0,1.0,1.0)

(3)ease-in : .... Faster and faster Bezier curves (0.42,0,1.0,1.0)

(4)ease-out : .... Faster and slower, Bezier curve (0,0,0.58,1.0)

(5)ease-in-out : ... Accelerate first, then slow down. Bezier curve (0.42,0,0.58,1.0)

constant speed transition-timing-function:linear;

Bezier curve transition-timing-function:cubic-bezier (0.25,0.65,0.88,0.25)

Five,transition-delay set a delay effect, is set after the delay after the effect of the execution. If you have more than one style effect, you can set multiple delay times, separated by spaces:

Transition-delay:0s,1s,0s;

Vi. Abbreviations and editions

You can use transition to shorthand, there are two types of shorthand

(1) separate statement

Transition:background-color 1s ease 0s,color 1s ease 0s,margin-left 1s ease 0s;

if all are unified, use all directly

Transition :all isease 0s;

                                  opera        firefox       chrome        safari        ie

               support required with prefix       15 ~ 22       5 ~ 15         4 ~ 25        3.1 ~ 6          none

support without prefix 23+ 16+ 26+ 6.1+ 10.0+

compatible full version (omitted)

32.CSS3 transition Effect