Css3 Learning Theory Animation

1. transform

Syntax: none | <transform-function> [<transform-function>] * The initial value is none.

Transform-function value:

Matrix (): defines matrix transformations.

Translate (): Move an element object.

Scale (): scales element objects.

Rotate (): rotate an element object.

Skew (): Skewed Element Object.

For example (compatible with browsers ):

1. rotate () function: transform: rotate (-90deg);-o-transform: rotate (-90deg);-moz-transform: rotate (-90deg);-webkit-transform: rotate (-90deg); filter: progid: DXImageTransform. microsoft. basicImage (rotation = 3 );

2. scale () function: transform: scale (2);-o-transform: scale (2);-moz-transform: scale (2);-webkit-transform: scale (2 );

When different parameter values are passed for scale, the scaling animation effect is different. Scale (1, 2) means that the width remains unchanged, and the height is twice the original. Scale (1,-2) means that the width remains unchanged, the height changes to 2 times of the original and the rotation is 180 degrees.

3. function: transform: translate (4px, 6px);-o-transform: translate (4px, 6px);-moz-transform: translate (4px, 6px ); -webkit-transform: translate (4px, 6px); the parameter can be a negative pixel value.

4. skew () function: transform: skew (30deg,-20deg);-o-transform: skew (30deg,-20deg);-moz-transform: skew (30deg, -20deg);-webkit-transform: skew (30deg,-20deg); will change the element shape, while the rotate function will not change the element shape.

5. matrix () function: transform: matrix (,);-o-transform: matrix (,);-moz-transform: matrix, 3, 5,);-webkit-transform: matrix (3, 2, 3, 5,); the parameter is a value of 6.

Ii. transform-origin

The origin of CSS deformation. By default, it is the center of the object. Transform-origin accepts two parameters, which can be specific values such as percentage, em, px, left, right, center, top, middle, and bottom.

For example:

Transform-origin: top right;-o-transform-origin: top right;-moz-transform-origin: top right;-webkit-transform-origin: top right;

Transform-origin: 0 0;-o-transform-origin: 0 0;-moz-transform-origin: 0 0;-webkit-transform-origin: 0 0;

Transform-origin: 0 100%;-o-transform-origin: 0 100%;-moz-transform-origin: 0 100%;-webkit-transform-origin: 0 100%;

Transform-origin: 50% 100%;-o-transform-origin: 50% 100%;-moz-transform-origin: 50% 100%;-webkit-transform-origin: 50% 100%;

Iii. transition-transition

1. transition-property: defines the CSS attribute name of the conversion animation. It can be none | all | CSS attribute list.

For example:

Transition-property: background-color;-o-transition-property: background-color;-moz-transition-property: background-color;-webkit-transition-property: background-color;

2. transition-duration: defines the duration of the conversion animation.

For example:

Transition-duration: 3 s;-o-transition-duration: 3 s;-moz-transition-duration: 3 s;-webkit-transition-duration: 3 s;

3. transition-delay: defines the delay time of the transition animation.

For example:

Transition-delay: 3 s;-o-transition-delay: 3 s;-moz-transition-delay: 3 s;-webkit-transition-delay: 3 s;

4. transition-timing-function: defines the effect of the conversion animation.

Optional values:

Effect: ease of use.

Effect-in: gradient effect.

Fade-out: gradient effect.

Fade-in-out: fade-out effect.

Linear: linear effect.

Cubic-besuppliers: Special cubic besell curve effects. Cubic-bezr (0.3, 0, 0.5, 1.0 ).

For example:

Transition-timing-function: linear;-o-transition-timing-function: linear;-moz-transition-timing-function: linear;-webkit-transition-timing-function: linear;

Iv. animation

1. animation-name: animation name.

2. animation-duration: animation time.

3. animation-timing-function: Specifies the animation playback mode.

4. animation-delay: Specifies the animation start time.

5. animation-iteration-count: Number of playbacks. Infinite indicates unlimited times ..

6. animation-direction: Specifies the animation playback direction. Normal -- each loop of the animation goes forward (alternate) -- the even number of times forward and odd times backward.

For example:

Div {

-Webkit-transform-style: preserve-3d;

-Webkit-animation-name: ani;

-Webkit-animation-duration: 10 s;

-Webkit-animation-iteration-count: infinite;

-Webkit-animation-timing-function: linear;

}

/* Call the animation below */

@-Webkit-keyframes ani {

0% {

-Webkit-transform: rotateX (0deg );

}

25% {

-Webkit-transform: rotateX (180deg );

}

50% {

-Webkit-transform: rotateX (360deg );

}

75% {

-Webkit-transform: rotateY (180deg );

}

100% {

-Webkit-transform: rotateY (360deg );

}

}

V. transform-style

Two values: preserve-3d: indicates that the plot scene is 3D. Flat: child elements do not participate in 3D conversion.