Css3 new animation and css3 new

Css3 new animation and css3 new

1. transiition transition: If the style is changed, the transition will be executed.

(1) format:Transiition: 1 s width linear, 2 s 1 s height;

(2) parameters:

• Transition-property: the style to be moved (all | [attr] | none)

• Transition-duration motion time

• Transition-delay Time

• Transition-timing-function motion form

Slow: (gradually slow down) Default Value

Linear: (uniform speed)

Memory-in: (acceleration)

Slow-out: (deceleration)

Slow-in-out: (acceleration first and then deceleration)

Cubic-bezeiser curve (x1, y1, x2, y2) http://matthewlein.com/ceaser/

(3) transition completion event

• Webkit kernel: obj. addEventListener ('webkittransitionend', function (){

 

• }, False );
• Firefox: obj. addEventListener ('transitionend', function (){

 

• }, False );

2. transform2D

(1) format:Transiition: 1 s width linear, 2 s 1 s height;

(2) parameters:

• Rotate () Rotation function value degree

Deg level

• Skew () skew function value

SkewX ()

SkewY ()

• Scale () the scaling function can take positive, negative, and decimal places.

ScaleX ()

ScaleY ()

• Translate () Displacement Function

TranslateX ()

TranslateY ()

• Base point of the transform-origin rotation (left top upper left corner)

(3) Note:Transform execution sequence problem-write first

(4)Matrix (a, B, c, d, e, f) matrix Functions

Default Value: matrix)

• Scale by Matrix

X axis scaling a = x * a c = x * c e = x * e;

Y axis scaling B = y * B d = y * d f = y * f;

• Realize displacement through matrix (No under ie)

X axis shift: e = e + x

Y axis displacement: f = f + y

• Skew through Matrix

X axis skew: c = Math. tan (xDeg/180 * Math. PI)

Y axis skew: B = Math. tan (yDeg/180 * Math. PI)

• Rotate by Matrix

A = Math. cos (deg/180 * Math. PI );

B = Math. sin (deg/180 * Math. PI );

C =-Math. sin (deg/180 * Math. PI );

D = Math. cos (deg/180 * Math. PI );

(5) transformation is compatible with IE versions earlier than IE9 and can only be achieved through Matrices 

• Filter: progid: DXImageTransform. Microsoft. Matrix (M11 = 1, M12 = 0, M21 = 0, M22 = 1, SizingMethod = 'autoexpand ');
• The matrix in IE does not have the E and F parameters.M11 = a; M12 = c; M21 = B; M22 = d

(6) IE base point correction

Obj. style. left = (obj. parentNode. offsetWidth-obj.offsetWidth)/2 + "px ";
Obj. style. top = (obj. parentNode. offsetHeight-obj.offsetHeight)/2 + "px ";

3. transform3D

(1) Parameters

• Transform-style (preserve-3d) creates 3D space
• Perspective depth of field
• Perspective-origin depth of field base point
• New functions for Transform

RotateX (): horizontal

RotateY (): vertical

RotateZ (): perpendicular to the screen

TranslateZ (): amplification of positive values and reduction of negative values

ScaleZ ()

4. animation

 

(1) time unit of the Key Frame

• Numbers: 0%, 25%, and 100%
• Character: from (0%), to (100%)

 

(2) Format

 

• @ Keyframes animation name {

Animation status

}

• @ Keyframes miaov_test {

From {background: red ;}

To {background: green ;}

}

(3) Parameters

• Required attributes

Animation name (Key Frame name)

Animation duration

Example:-webkit-animation-name: 'M';-webkit-animation-duration: 4S;

• Optional attributes

• Animation-timing-function animation Motion Form

 

Linear speed.

 

 

Refer buffer.

 

 

Slow-in is slow to fast.

 

 

Slow-out is fast to slow.

 

 

Slow-in-out starts from slow to fast and then slow.

 

 

Cubic-bezr (number, number): the type of the beiser curve. Four values must be in the range [0, 1 ].

 

• Animation-delay animation delayJust for the first time

• Animation-iteration-count repeated times --Infinite is unlimited

• Animation-direction reset before playback

 

Whether the animation is reset before playing

 

 

The alternate animation is executed directly from the last stop position.

 

 

The second normal animation jump directly to the 0% State to start execution.

 

• Animation-play-state playing status (running and paused)