Detailed explanation of the two pause methods (transition, animation) in CSS3

Two ways to change coordinates:

1. Traditional top and left coordinate modification

2.Transform in CSS3 Attribute

realizes the character’s walking effect through the combination of CSS3 animation and transition. Generally speaking, the state of motion needs to be controllable, so that we can facilitate further operations. Animation is used to realize the change of the character's movement, that is, the position of the sprite map is changed, and transition is to realize the left change of the character, that is, the coordinates move to the right, the character moves forward, and the background moves backward.

Pause method of transition
Transition, generally speaking, the place to pause is the target point set by the program at the beginning, so this is actually There is no need to control it, and there is no way to control it. This is a animation transition effect. The browser only provides a callback for the end of the animation. Of course, there can be a workaround, Do a process that forces the target transition value to be changed
How to operate:

$("button:last").click(function() {
        var left = $boy.css('left');
        // 强制做了一个改变目标left的处理
        // 动画是要运行10秒,所以此时动画还是没有结束的
        $boy.css('left',left);
        // 增加暂停的样式
        $boy.addClass('pauseWalk');
 });

The stop of the transition is to force it to be in the current at the left value.

You can see the code block above for details. The transition in the pause method is forced to set the left coordinate to achieve a pause effect. However, this is problematic. The next startup must wait for the previous animation. time is over.

Pause method of animation

##CSS3 animation directly Provide an animation-play-state style to control animation pause processing. Add a control pause style. When writing the animation style, pay special attention to the compatibility of different browsers. Add the corresponding prefix

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

. You only need to dynamically add and delete the corresponding animation character element node. This style can control the start and pause of this elf, it is very simple

[Related recommendations]

1.

Introducing the animation-direction attribute in CSS3 in detail

2.

The 8 properties of CSS3 animation (Animation) that must be mastered

3.

Using the animation property to implement delayed execution between loops example tutorial

4.

Share an example of monitoring css3 animation end event

The above is the detailed content of Detailed explanation of the two pause methods (transition, animation) in CSS3. For more information, please follow other related articles on the PHP Chinese website!