The implementation steps of animation technology in CSS3

In CSS3 if need to realize animation effect, will use three kinds of technology, ransform-origin,transition,ransition-delay and transition-timing-function, today give everybody wisp clear idea, See how the animation works.

First, Transform-origin

The origin of the CSS warp, which is the center point of the object by default. Transform-origin accepts two parameters, they can be a percentage, EM, PX and other specific values, can also be left, right, center, top, middle, bottom and other keywords.

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%;

Ii. transition--Transition

1.transition-property: Defines the name of the CSS property that transforms the animation. It could be none|all|. A list of CSS properties.

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 length of time to convert animations.

For example:

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

3.transition-delay: Defines the delay time for transition animations.

For example:

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

4.transition-timing-function: Defines the effect of converting animations.

The values can be:

Ease: mitigation effect.

Ease-in: Fade effect.

Ease-out: Fade effect.

Ease-in-out: Fade fade effect.

Linear: linear effect.

Cubic-bezier: Special cubic Bezier curve effect. Cubic-bezier (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;

Third, animation

1.animation-name: Animated name.

2.animation-duration: Animation time.

3.animation-timing-function: How to play the animation.

4.animation-delay: The animation starts playing time.

5.animation-iteration-count: Number of plays. Infinite represents an infinite number of times.

6.animation-direction: The direction in which the animation plays. Each cycle of the normal--animation forwards alternate--The first odd number of times, odd times backwards.

For example:

div {-webkit-transform-style:preserve-3d;-webkit-animation-name:ani;-webkit-animation-duration:10s;- Webkit-animation-iteration-count:infinite;-webkit-animation-timing-function:linear;} /* Below call animation */@-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);}

Believe that you have seen these cases you have mastered the method, more wonderful please pay attention to the PHP Chinese network other related articles!

Related reading:

CSS3 a detailed description of the Background-size property

CSS3 a detailed description of the Translate property

The Filter property of the CSS3 is described in detail