Explain two kinds of pause modes in CSS3 (transition, animation)

let the coordinates change in two ways:

1. Traditional Top,left Coordinate modification

The Transform property in 2.CSS3

Through the combination of CSS3 animation and transition, the character's walking effect is realized. Generally speaking, the state of movement is controllable, so that we can do further operation. The use of animation to achieve the change in the character movement, that is, the change of the position of the sprite, and transition is to achieve the left of the character changes, that is, the coordinates to the right, the character forward, the background to go backwards.

How to suspend transition
Transition, in general, the place to pause is the beginning of the program set a good target point, so this is actually not necessary control, this also has no way to control, this is an animation transition effect, the browser only provides a callback animation end. Of course there can be a workaround to do a forced change to the target transition value processing
How to operate:

$ ("Button:last"). Click (function () {        var left = $boy. css (' left ');        Forced to make a change to the left of the processing        //animation is to run for 10 seconds, so at this time the animation is not the end of the        $boy. CSS (' left ');        Adds a paused style        $boy. addclass (' Pausewalk ');});

Transition's stop is to let him force is at the current left value.

Specifically, you can see the above code block, the pause method within the transition force to do a set of left coordinate processing, to achieve a pause effect, but this is problematic, the next start must wait for the last animation time to end.

How to suspend animation

CSS3 's animation directly provides a animation-play-state style to control the animation's pause handling. Added a control pause style, write animation style of special attention to the compatibility of different browsers, plus the corresponding prefix

. pausewalk {   -webkit-animation-play-state:paused;   -moz-animation-play-state:paused;}

It is only necessary to control the start and pause of the sprite by dynamically adding and deleting this style on the corresponding animation animated character element node, which is very simple.

"Recommended"

1. Detailed description of the Animation-direction attribute in CSS3

2.8 large properties of the CSS3 animation (Animation) that must be mastered

3. Using the animation attribute to implement the time-lapse execution Example tutorial

4. Share a listener CSS3 animation (animation) End Event instance