Animate animation parsing

For this CSS3 attribute, the Web is defined as experimental technology, so naturally for those non-Gao browsers are pain, through the caniuse we can visually see this property browser support situation:

ie10+ and firefox33+ Support this attribute cut does not need to write a private prefix, chrome31+,safari7+,andriod4.1+ need to write their own private prefix to support, but Oprea computer-side support, but the mobile side is not supported, no solution. Official documents of the Web

Property name:	Animation
Property value:	<single-animation>#
Initial value:	See Independent attribute values
Apply to:	All elements
Inheritance:	No
Percentage:	N/A
Calculated value:

The value of the single-animation is | |  ||  ||  ||  ||  || ||

In fact, this animation is a shorthand value, it includes the above 8 sub-attribute values, just mentioned above, if all browsers support this property, you do not need to fill in any prefix, as follows:

. test{animation:;}

The above is only suitable for Firefox and Opera browser, if said to be compatible with most browsers, then it should be written as follows:

. test{-webkit-animation:;-moz-animation:;-o-animation:; Animation:;}

Whether it is animation or video, we should understand a thing: what is the name of the animation, its length of play, the speed of playback, whether to delay the play, whether the number of unrestricted play, whether to reverse, whether the pause should be changed. These are the basic requirements for a video, of course, you say you want to have a special effect or something to put where, if you say in the video playback in 30s seconds when an advertisement God horse, then you need to know the @keyframes concept of key frame, CSS3 in many of the movements are dependent on this KeyFrames keyframes to simulate the execution of a different CSS style. Popular say point is animation just define an animation basic settings, but @keyframes is by changing the contents of the animation to achieve the effect of simulation animation, walk a 100m road, we require you are to be completed in 60 minutes, each time before further is to keep the same movement forward, then, When viewed as an onlooker, if ignoring the background as a contrast, in fact, he is not feel people moving, and this actually involves a reference to the relationship, moving and not moving are relatively, two of the same speed of the object in the movement, a see b,b is still, but static C see B,b is always moving.

So much nonsense, in fact, is to say animation is to rely on @keyframes survival, or it will not have the meaning of existence.

Animation-name, rules to bind the name of the keyframes, whatever you take, but for the convenience of future maintenance, it is recommended to take a name similar to the action related names better. For example, if we want to bind a running action, we can name it run.

Time , there are two times, the previous one is the time required to complete the animation, full name animation-duration , the second time is the beginning of the animation delay to play, The full name is called Animation-delay , these two values can be in seconds ' s ' can also be used in microseconds ' Ms ' to write, 1000ms=1s, this does not have to introduce.

animation-timing-function , which specifies the motion curve of the animation, here are 9 values, namely ease | linear | ease-in | ease-out | ease-in-out | Step-start | Step-end | Steps ([, [Start | end]]?) | Cubic-bezier (x1, y1, x2, y2)
Ease: The animation starts slowly, then accelerates, and finally slows down, the default value;
Linear: The speed of the animation is the same from beginning to end;
Ease-in: Starts at low speed;
Ease-out: ends at low speed;
Ease-in-out: Animation starts and ends at low speed;
say this steps (n,[start | end]?) This step function, this function can divide the animation average into basically equal, this n is a natural number, meaning is to divide an animation evenly into N, until the average to finish this animation, this is to be different from linear , because linear The is the animation as a whole, there is no breakpoint in the middle, and steps is the animation segment average execution. Step-start is equivalent to steps (1,start), the animation is divided into 1 steps, the animation is executed as the beginning of the left end of the portion of the beginning; Step-end is equivalent to steps (1,end): The animation is divided into one step, the animation is executed with the end endpoint as the beginning, the default value is end. This is illustrated by the following:

Using this step step function we can make the effect of a frame-by-box animation like we did at the beginning
PS: In fact, I am a little puzzled about this function, this steps (1,start), according to my understanding should be from the animation of the second picture as the beginning of the animation, who knows this step more specific introduction trouble to tell, Because of this, you can write less of the CSS styles in the keyframes, such as the following two functions are the same in the execution of animation:

. test1{Background:url (http://img.xiaoho.com/2014/12/test.png) no-repeat 0 0;-webkit-animation:run 350ms steps (1) infinite 0s;} @-webkit-keyframes Run {0% {background-position:0;} 20% {background-position:-90px 0;} 40% {background-position:-180 PX 0; } 60% {background-position:-270px 0;} 80% {background-position:-360px 0;} 100% {background-position:-450px 0;}} . test2{Background:url (http://img.xiaoho.com/2014/12/test.png) no-repeat 0 0;-webkit-animation:run 350ms steps (5) infinite 0s;} @-webkit-keyframes Run {100% {background-position:-450px 0;}}

Picture below

The picture takes only 5 steps to complete the entire action.

The two are in fact the same, the first is to take the animation into one step, the animation starts with the end of the endpoint as the starting point to execute, and then the 0%,20,40,80,100 performed the background map switch, and the second is the animation is divided into 5 steps, and then at 100% when the last picture of the background.

Animation-iteration-count, the number of animation plays, the default value of 1,infinite is unlimited, if set to unlimited, then the animation will be played continuously.

Animation-direction, specifies whether the animation moves in the opposite direction.
= Normal | Reverse | Alternate | Alternate-reverse
The first value is the normal rotation play, the default value, reverse for the reverse rotation, alternate start normal rotation, play once and then reverse rotation, if set animation-iteration-count:1 the value is invalid, alternate-reverse start for the reverse rotation, After sowing once, follow the normal rotation of the return, rotate, set count to 1, the value is invalid. Specific results please scan the QR code below the phone

Animation-play-state, defines whether the animation is running or paused, which is a later property, with two property values of running and paused respectively. The default value is normal, and the animation plays normally. If it is for paused, then the animation is paused. If an animation starts as a movement, then if set paused then the animation pauses, if again set running, then the animation will start from just paused place movement, may say a little bit of a mouthful, then can go to see the demo

Animation-fill-mode, defines a state outside of the animation's playing time, as the name implies, or gives it a state after the animation has finished playing
Animation-fill-mode:none | Forwards | Backwards | Both None, after playing does not change the default behavior, the default value, forwards is stopped at the end of the animation of the screen, backwards is the callback to the beginning of the animation screen, both is applied as the end of the animation or the beginning of the state, not the example seems sorry to the audience, A little demo, then.

Conclusion

Well, the sky has been late to write so much, did a final hot fight small animation out, you can appreciate, take out the phone out of the sweep may perhaps you really interested in this animation attribute Oh.

Inside what, want to see the CSS directly can go to the source code to see, here is not posted out, their hands clothed ha.

Well, I wish you a Happy New Year, 2014 Goodbye!

Resources:
http://dev.w3.org/csswg/css-animations/#animation
Transition-timing-function-property

Animate animation parsing