A detailed description of the deformation and animation in CSS3

Recently in the study of the production of mobile pages, did a small demo page, which used a lot of CSS3 new content, including CSS3 new variants and animations. In fact, this CSS3 animation effect with JS can also be achieved, but CSS3 can turn on hardware acceleration, better performance.

(The browser prefix is not written below, if necessary, please add it yourself ~ ~)

CSS3 Common animation effect of the implementation, in fact, mainly rely on transition and animation. In general, these two will be used in conjunction with the new attribute transform in CSS3.

So what are these three things actually used for? I follow my own understanding to the next simple conclusion.

Transform: deform the elements;

Transition: When the attribute of the element changes, give him a transition animation effect;

Animation: do complex animations.

Let's talk about it in detail below.

The first thing to say is the transform syntax:

Transform:none | Transform-functions;

None is his default value, and the latter transform-functions refers to the transformation function;

There are two types of deformation functions: 2D and 3d;//related syntax can be queried in http://www.w3school.com.cn/cssref/pr_transform.asp

Where 2D is included: (Deformation is based on the center of the element, i.e. 50% of the x-axis and y-axis)

Translate ()//Includes Translatex () and Translatey (); Action: Moves the element according to Xoy coordinates (the right side of the x direction is positive, and the y direction below is positive);

Scale ()//Includes ScaleX () and ScaleY (); function: enlarge or reduce the element;

Rotate ()//function: rotating element;

Skew ()//Includes skewx () and Skewy (); Function: to tilt the element.

And the 3D is more z-axis, the relevant grammar can be found in the information, here is the key recommendation Zhang Xin Xu Great god wrote an article (http://www.zhangxinxu.com/wordpress/2012/09/ css3-3d-transform-perspective-animate-transition/), the explanation of the deformation is easy to understand. For the article said in the grammar can be paired with the following simulator to eat, the effect is better ~ (http://fangyexu.com/tool-CSS3Inspector.html)

Let me summarize a few points: 1, 3D deformation, deformation of the elements outside to first package two layers of labels as a stage, one as a container.

Stage    Container        element        element        ...

My personal understanding is that if the elements on the stage are treated as a whole, you can just add a layer of labels, that is, the stage as a container

Stage (container)    element    element    ...

2, on the stage of CSS, set Perspective (sight), meaning is to assume the distance from the stage. Set the transform-style:preserve-3d on the container's CSS to open the 3D view so that the child elements of the container are rendered in 3D space. If the stage is a container, perspective and Transform-style are written together.

So, is the base point of the deformation only the center of the element? No. The Transform-origin property can change the base point of the deformation.

Transform-origin's keywords are generally top/bottom/left/right/center/top left/top right and so on, and some of the individual keywords are actually shorthand, such as top = top Center = center top;

Then there is the transition animation transition.

Trigger conditions are: hover/: Focus/: Active/: Events in Checked/js

Syntax: Transition: Specify CSS properties for transitions, time required for transitions, functions for transitions (speed control of animations), start delay time

Specify CSS properties for transitions: all/Specify style/None (if omitted, all, none is generally used to empty the animation)

Time required for transition: unit S/ms (default = 0)

Functions of Transition: ease (from fast to slow default)/linear (constant speed)/ease-in (acceleration)/ease-out (deceleration)/ease-in-out (acceleration and deceleration)/cubic-bezier (three times Bezier curve)

Delay Time: Unit S/ms (default = 0)

(When writing transition, write the animation time first, then write the delay time)

For example, the essay written by Boya this autumn:

Use CSS3 to achieve a circle with a radius of 25px to speed from fast to slow 300px scrolling.

p{width:50px; height:50px; border-radius:25px; background: #000; transition:1s ease-out;} p:active{Transform:translatex (300px) rotate (780deg);}

Thief Simple Bar ~ Here are a few details, the first is transition is placed on the element, not active, if placed on active, there is no return to the action, we can try.

The second is, transform multiple attributes, the middle with a space to separate, if the comma is not reflected.

But if I add transition to the: active,

p{width:50px; height:50px; border-radius:25px; background: #000; transition:1s ease-out;} p:active{Transform:translatex (300px) rotate (780deg); transition:2s ease-in;}

In this way, you will execute the transition in the active, that is, when you go to the time of 2s, speed up the movement, and when you come back to perform the transition in p, time 1s deceleration movement.

Finally to the animation ~ animation is also animated, but the function is more powerful than transition, because animation can control every step of the animation, and transition can only control the beginning and the end.

Syntax Animation: Key frame animation name, animation time, animation playback mode (function), delay time, number of cycles, playback direction, playback status, animation time outside the properties;

Keyframe Animation name: is the name of the animation you want to perform, here you first know the syntax of the keyframe

@keyframes name{     0%{...           }       50%{...    }    100%{...    }  }

The key frame here is the name, then the percentage is the progress of the animation, you can set different percentages as needed, and then set different animations.

Animation time: Same as transition ~

Animation playback mode (function): the same as the function of the transition transition ~

Delay time: Same as transition ~

Number of cycles: the number of times the animation plays, the default is 1, usually an integer, if it is infinite, it plays infinitely;

Playback direction: The default is normal, is normally played forward, there is a value is alternate, is the first positive play, and then reverse play, constantly alternating;

Playback Status: Running (default), paused//Like music can pause animation by action;

Properties outside of animation time: None (default), forwards, backwards, both;

Let's take an example:

@keyframes color{    0%{background:yellow}    100%{background:blue}}p{background:black}

None: Before the animation begins: black; After the animation is over: Black

Forwards: Before the animation begins: black; After the animation is over: Blue

Backwards: Before the animation begins: yellow; After the animation: Black

Both: Before the animation begins: yellow; After the animation: Blue

It's so simple ~

Finally, say the three attributes in the JS syntax:

Transform

Obj.style.transform = "TranslateX (100px) scale (2)", Obj.style.webkitTransform = "TranslateX (100px) scale (2)";//with browser prefix

Transition

obj.style.transition = "1s"; obj.style.webKitTransition = "1s";//with browser prefix

Animation

obj.style.animation = "name 1s";//1, key frame first in the CSS, 2, compatible writing in the key frame;