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

零下一度
Release: 2017-05-18 14:38:41
Original
8594 people have browsed it

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');
 });
Copy after login

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;
}
Copy after login
. 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!

source:php.cn
Statement of this Website
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Popular Tutorials
More>
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template
About us Disclaimer Sitemap
php.cn:Public welfare online PHP training,Help PHP learners grow quickly!