How to Use the commonly used attribute "animation-play-state" in css3, and "animationplaystate"

How to Use the commonly used attribute "animation-play-state" in css3, and "animationplaystate"
Introduction to animation-play-state

The animation-play-state attribute specifies whether the animation is running or paused.

Div {animation-play-state: paused;-webkit-animation-play-state: paused;/* Safari and Chrome */}

Browser support:
Internet Explorer 10,FirefoxAndOperaSupportedanimation-play-stateAttribute.
SafariAnd ChromeSupported alternative-webkit-animation-play-stateAttribute.
Note: Internet Explorer 9 and earlier versions do not support the animation-play-state attribute.

Syntax:animation-play-state: paused|running;
Paused specifies that the animation has been paused.
Running specifies that the animation is playing.

The following describes how to use animation-play-state.
Note: The Private prefixes of the sample code are omitted.

Use animation-play-state to control animation playback on each screen

1. Class Name active and animation triggered
First, the use of active to trigger the animation of each screen is almost conventional. We recommend that you become the default industry standard.
Generally, when the corresponding Screen Content enters, use JS to add the class name active to the container:

container.classList.add("active");

If you want to make a high level of animation, you can useReflowTrigger againAnimation:

container.classList.remove("active");container.offsetWidth = container.offsetWidth;container.classList.add("active");

2. Class Name active and animation control skills
How to control the playback of an animation? We usually use the following method to achieve the completeness of the animation.CSSCode inActiveStatus, such:

. Element1 {/* size and positioning */}. element2 {/* size and positioning */}. element3 {/* size and positioning */}.... active. element1 {animate: name1 1 s ;}. active. element2 {animate: name2 1 s ;}. active. element3 {animate: name2 1 s ;}...

From the implementation and functions, the above method is very good, easy to understand, not easy to make mistakes. However, I personally prefer to use CSS 3animation-play-stateAttribute to control the animation on each screen. The implementation is as follows:

AnimationCSSThe code is written directly on the element:

. Element1 {/* size and positioning */animate: name1 1 s ;}. element2 {/* size and positioning */animate: name2 1 s ;}. element3 {/* size and positioning */animate: name3 1 s ;}...

Create a class name, such. Animate.AnimationAdd the class name to all animation elements.CSSCode:

.animate {    animation-play-state: paused;}.active .animate {    animation-play-state: running;}

The reason why I prefer the following method is that there is a "No intrusion" feeling, the code level is clear, and the control relationship is clear. It is conducive to later maintenance and expansion.

HoweverAnimation-play-stateNote thatIE10/IE11Browser,Animation-play-stateIt cannot be abbreviated. For example:

.element { animate: shake 4s 2s both infinite paused; }

OnlyCSSDeclare to be suspended! The following statements are supported:

.element {     animate: shake 4s 2s both infinite;    animation-play-state: paused;}

Someone may be wondering, why?IEIs the browser messy? First, we cannot ignore mainstream mobile phonesWindows PhoneSecondly, handsome screen flip animations are not proprietary to mobile terminals, and are also applicable to desktops. A little effort, full desktop mobility adaptation, why not!

Continuous animation in different States

Sometimes, an animation may not be a wave of streams in different States.
For example, our little rocket first fades out of the animation and then floats infinitely up and down. How can this problem be achieved?

The key points are animation decomposition and latency.

As far as I know, there is no way to use only oneKeyframesThe key frame declaration achieves this effect, because there is an animation state change: an animation that is executed only once and an infinite loop animation.

What should I do? We can break down the animation and write twoAnimation keyframesAnimation key frame description.

@keyframes fadeIn { /* ... */ }@keyframes float { /* ... */ }

 

Then, apply the key frame animations respectively. How to apply it? Yes2TIPS:
1. comma and multiple animation values
As follows:

Div class = "element"> rocket </div>. element {animation: fadeIn 1 s, float. 5 s 1 s infinite;}/* I fade out, it takes 1 second; I start to float infinitely after 1 second */

WhereFloat. 5 s 1 s infiniteHere1 sIt is the infinite floating animation Execution Delay Time, so the two animations work perfectly together and it feels like an animation. In fact, it is an animation.CSS3 animationThe animation follows the sameUIThread, which is why it is recommendedCSSThe reason for implementing the animation effect.

This statement has no compatibility issues and can be used happily.

2. Label nesting and independent Animation
We can also implement continuous animation through nested labels, such:

<Div class = "element-wrap"> <div class = "element"> rocket </div>. element-wrap {animation: fadeIn 1 s;}/* Fade out, it takes 1 second */. element {animation: float. 5 s 1 s infinite;}/* I started to float infinitely after 1 s */

Someone may be surprised.AnimationIn itself, multi-animation parallelism is supported. You still have tag nesting, so there is no reason to use it! That's right. Let's look at this example. However:

① Extract public Animation
This type of multi-screen animation hasNMultiple elements simultaneously execute different animations. For example, the rocket fades out and then floats up and down; the flame of the rocket fades out, then the size changes; the black hole fades out, and then the left and right follow the waves. How do you implement it?

If you simply useAnimationSyntax, which should be:

. Element1 {animation: fadeIn 1 s, float. 5 s 1 s infinite;}/* I fade out, it takes 1 second; I start to float infinitely after 1 second */. element2 {animation: fadeIn 1 s, size. 5 s 1 s infinite;}/* I fade out, it takes 1 second; I start to change the size after 1 second */. element3 {animation: fadeIn 1 s, move. 5 s 1 s infinite;}/* I fade out, it takes 1 second; I start to move around in 1 second */

As you can see, fade-out is a public animation effect. We can use nested labels to merge common syntaxes and perform subsequent maintenance:

. Element-wrap {animation: fadeIn 1 s;}/* Everybody fades out in 1 second */. element1 {animation: float. 5 s 1 s infinite;}/* I float infinitely after 1 second */. element2 {animation: size. 5 s 1 s infinite;}/* I suddenly went big and small after 1 s */. element3 {animation: move. 5 s 1 s infinite;}/* I move around 1 second */

 

② Avoid transformation conflicts
An element animation is an edge.360Degrees of rotation, side enlargement (from0Zoom in100%). For animations with typical features, we obviously need to extract and share them independently:

@keyframes spin { /* transform: rotate... */ }@keyframes zoomIn { /* transform: scale... */ }

Okay, now the problem is: zoom in and rotate the side:

. Element {animation: spin 1 s, zoomIn 1 s;}/* rotation: Ah, it's finished. I'm magnified and overwritten! */

Because both are usedTransformAnd a cruel coverage. Of course, good people will say that you useZoomNo! Indeed, if it is just a mobile terminal, useZoomIt's really amazing! However, our enterprise activities,PCIs the main battlefield, so,FireFoxBrowser (FFUnrecognizedZoom.

What should I do? Create a newSpinZoomInOr?

Right. You just need to set a tag.

. Element-wrap {animation: spin 1 s;}/* */. element {animation: zoomIn 1 s;}/* */

No intrusion locating and center locating criterion 1. here, "non-intrusive positioning" refers to the positioning of elements not affected by animation. It consists of two parts: First, keyframes is not used to determine the initial position; second, do not use Attribute positioning in keyframes.

①. Do not use keyframes to determine the initial position
It should be known that the fill-mode of CSS3 animation can determine the position before and after the animation ends, that is, it can be positioned. At this point, there may be friends who pretend to be smart and use animation keyframes 0% {} Or form {} for positioning. It seems that code writing is also saved. It seems like it is actually narrow. This is actually unfriendly to browsers that do not support or do not support animation. For example, Android2.3 does not support animation-fill-mode, IE6-IE9 does not support CSS3 animation, so when encountering these browsers, the layout of page animation elements is actually destroyed. Therefore, when positioning these animation elements, you need to use "No intrusion location", that is, even if the page does not have animation, I am also a "Peugeot ".

②. Do not use Attribute locating in keyframes
For example, there is a ball positioned in the center of the module, and there is an infinite rotation effect. Using transform: translate (-50%,-50%) center positioning is no longer appropriate, so I don't have to worry about it, so I used transform positioning. In this case, if a conflict occurs, the rotation animation also needs to be transform.

@keyframes spin {    0% { transform: rotate(0); }    100% { transform: rotate(360deg); }}

Either use the common spin coverage in the industry, or use the same engine for reuse:

@keyframes spin-trans {    0% { transform: rotate(0) translate(-50%,-50%); }    100% { transform: rotate(360deg) translate(-50%,-50%); }}

Obviously, they are not suitable. We recommend that you use the traditional left/top/margin for positioning, which is "non-invasive" with the transform animation ".

 

2. the "center positioning criterion" consists of two parts: one is the element positioned in the middle of the container, and the other is the element positioned in the center.

①. The element is located in the middle of the container
The animation elements in the container and the container can be regarded as an animation module. For this module to easily control the horizontal layout and vertical part, the animation elements in the container must be formed in the middle of the container, do not be affected by the design draft or the surrounding environment.

②. The positioning method is centered.
The so-called "center positioning" is relative to "Traditional positioning. By default, modules and text in Web pages are stacked relative to the upper-left corner. Therefore, when we reconstruct pages, make la S, and write Interactive effects, they are also located relative to the upper-left corner. Use the positioning feature of the element itself. This is awesome and recommended! However, if you are dealing with multiple element CSS animations, you may need to change your inertial thinking. The most important thing is"From the upper left corner as the reference point to the center point as the reference point".
When we implement multi-element animation effects, there will be two types of roles: one is the container, and the other is the many animation elements in the container.

Specifically, for container elements, especially for mobile products, we naturally place them in the center:

.container {    position: absolute; left: 50%; top: 50%;    transform: translate3d(-50%, -50%, 0);}

 

In the upper left corner (or in the upper right corner ):

.example {    position: absolute; left: 100px; top: 100px;}

 

Center Position + margin offset:

.example {    position: absolute; left: 50%; top: 50%;     margin-left: -100px; margin-top: -100px;}

Reference address: https://isux.tencent.com/css -...