The use of CSS3 common attribute Animation-play-state

Animation-play-state Introduction

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

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

Browser support:
Internet Explorer 10, Firefox and Opera support animation-play-state properties.
Safariand Chrome attributes that support overrides -webkit-animation-play-state .
Note: The Animation-play-state property is not supported for Internet Explorer 9 and earlier versions.

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

Here's a look at Animation-play-state's tips for use.
Note: The private prefixes of the sample code are omitted, and we

Use Animation-play-state to control animation playback per screen

1. Class name active and animation triggering
First of all, using active to trigger each screen animation is almost conventional and should also be recommended as the default industry specification.
As a general rule, add the class name active to the container using JS when the corresponding screen content is entered:

Container.classList.add ("active");

If you do a high animation, you want to browse this screen content, the animation will go through, you can use reflow to re-trigger the animation:

Container.classList.remove ("active"); container.offsetwidth = Container.offsetwidth;container.classlist.add (" Active ");

2. Class name active and animation control techniques
How to control the play of the animation specifically? Our usual first reaction is to use the following method to implement the full CSS Code of the animation in the active state, such as:

. element1 {/* dimensions and Positioning */}.element2 {/* dimensions and Positioning */}.ELEMENT3 {/* dimensions and Positioning */} .... Active. element1 {animate:name1 1s;}. Active. element2 {animate:name2 1s;}. Active. element3 {animate:name2 1s;} ...

From the implementation and function, the above method is very good, easy to understand, easy to make mistakes. However, I personally prefer to use the properties animation-play-state of the CSS3 to control each screen animation, the implementation of the following:

The animation-related CSS code is written directly on the element:

. element1 {/* size and positioning */animate:name1 1s;}. Element2 {/* size and positioning */animate:name2 1s;}. ELEMENT3 {/* size and positioning */animate:name3 1s;} ...

Create a class name, such as . Animate, that adds the class name to all elements that use the animation animation, such as the following CSS code:

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

The reason why individuals prefer the latter approach is because there is a "no intrusion" feeling, the code level is clear, the control relationship is clear. Facilitates later maintenance and expansion.

However, there are some things to note about using animation-play-state , andanimation-play-state is not shorthand for ie10/ie11 browsers. Such as:

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

will only let the entire CSS declaration hang out! The following wording supports:

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

Some people may be surprised, how suddenly IE browser disorderly into the? First, we can't ignore the Windowsphone of the mainstream phone. Second, the handsome Flip screen animation is not the mobile side of the proprietary, desktop side is also applicable. A little force, desktop mobile full fit, why not!

Continuous animation in different states

Sometimes, an animation may not be a wave, a state of the stream.
For example, our little rockets first fade out of animation and then hover infinitely up and down. How to achieve it?

The key point is animation decomposition and delay.

As far as I know, there is no way to achieve this effect with just one keyframes keyframe Declaration, because there is a change in the animation state: An animation that executes only once and an infinite loop animation.

What to do? We can decompose the animation and write 2 animation keyframes Animation keyframe description.

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

Then, apply these keyframe animations separately. How to apply it? There are 2 tips:
1. Comma and multi-animation animation values
As follows:

P class= "element" > Small rocket </p>. element {animation:fadein 1s, float. 5s 1s infinite;}  /* I fade out, take 1 seconds, I start floating in 1 seconds * *

where float. 5s 1s infinite here 1s is the infinite floating animation execution delay time, so, two animation perfect match, feel like an animation. In fact, it is an animation, all CSS3 animation animations Walk the same UI thread, which is why it is recommended to use CSS for animation.

There is no compatibility problem, so you can use it happily.

2. Tag nesting and standalone animations
We can also implement continuous animations in the form of nested tags, such as:

<p class= "Element-wrap" ><p class= "element" > Small rockets </p></p>. element-wrap {animation:fadein 1s;} /          * I fade out, need 1 seconds */.element {animation:float. 5s 1s infinite;}   /* I start to float in 1 seconds * *

Someone might be surprised. Animation itself support multi-animation parallel, you also have a tag nested, no reason to use it ah! Yes, just looking at our example, that's true. But:

① extracting common animations
This type of multi-screen animation is that there are N multiple elements simultaneously performing different animations. For example, a rocket is faded out and then floated up and down; The rocket's flame fades out and then the size changes; The black hole is faded out and then left and right. How do you make it work?

If you use the animation syntax purely, it should be:

. element1 {animation:fadein 1s, float. 5s 1s infinite;}  /* I fade out, it takes 1 seconds; I start floating indefinitely after 1 seconds */.element2 {animation:fadein 1s, size. 5s 1s infinite;}   /* I fade out, need 1 seconds; I start size change after 1 seconds */.element3 {animation:fadein 1s, move. 5s 1s infinite;}   /* I fade out, it takes 1 seconds, I start moving around 1 seconds */

As you can see, fade-out is a common animation effect, we can use nested tags to achieve common syntax merging, aspects of post-maintenance:

. element-wrap {Animation:fadein 1s;}          /* Everyone 1 seconds fade out */.element1 {animation:float. 5s 1s infinite;}  /* I float 1 seconds after Infinity */.element2 {animation:size. 5s 1s infinite;}   /* I am suddenly big and small in 1 seconds */.element3 {animation:move. 5s 1s infinite;}   /* I'll move around in 1 seconds */

② Avoiding transformation conflicts
One element animation is the edge degree rotation, the edge magnification (from 0 to 100%), like this typical feature of the animation we obviously want to separate and common:

@keyframes Spin {/* Transform:rotate ... */} @keyframes zoomin {/* Transform:scale ... */}

Okay, now that's the problem, zoom in and turn:

. element {animation:spin 1s, zoomin 1s;}  /* Spin: Ah, it's over, I'm covered! */

Because of all the use of transform, there was a brutal cover. Of course, a good person will say, you use zoom not just good! Indeed, if it's just the mobile side, using zoom is really awesome! However, our business activities, thePC is the main battlefield, so theFireFox browser (FF does not know zoom) is not to be ignored.

What to do? Re-build a description of the animation keyframe named spinzoomin or?

Yes, you're just going to have to label it right outside.

. element-wrap {animation:spin 1s;}   /* I'll turn */.element {animation:zoomin 1s;}      /* I'm big * *

Non-intrusive positioning and centering orientation criteria

1. Here the "no intrusion location" refers to the element is not affected by the animation location, contains two parts: first, do not use keyframes keyframes to determine the initial position, and the other is not to use the keyframes attribute positioning.

①. Determine the initial position without using keyframes
It should be known that the CSS3 animation Fill-mode can determine the position of the element animation before and after the end, that is, also has the role of positioning. At this point, there may be a small partner, pretending to be smart, using animation keyframes 0% {} or form {} to do positioning, seemingly, also save writing code. It looks great, actually narrow, which is actually unfriendly to browsers with poor or unsupported animation support, such as Android2.3 does not support Animation-fill-mode, IE6-IE9 does not support CSS3 animation, so When confronted with these browsers, the layout of the page animation elements is actually destroyed. Therefore, when these animation elements are located, it is necessary to use "no intrusion location", that is, even if the page is not animation, I am also a "Peugeot person."

②. Do not use attribute positioning that appears in keyframes
For example, there is a ball, just positioned in the center of the module, with an infinite rotation effect. Use Transform:translate ( -50%,-50%) center positioning again suitable but, do not feel uncomfortable in my heart, so, used the transform positioning. At this point, the conflict occurs, the rotation animation also needs transform transformation.

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

Either use the industry's customary spin coverage, or reinvent the stove:

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

Obviously, it's not appropriate. It is recommended to use traditional left/top/margin for positioning, and transform transform animation "no intrusion".

2. Here the "Center positioning Criteria" contains two parts: first, the element is positioned in the middle of the container, and the second is that the element is positioned in the center position.

①. Element positioning in the middle of the container
The container and the animation elements inside the container can be regarded as an animation module, for this module can be easily steered horizontal layout and vertical parts, the animation elements inside the whole must be in the middle of the container, not to be design draft or the surrounding environment influence.

②. Positioning mode for center positioning
The so-called "center positioning" is relative to "traditional positioning". The Web page of the module, the text of what the default is relative to the upper left corner of the stack, so, it is natural that we refactor the page, do layout, write interactive effect, is also relative to the upper left corner positioning. It is also recommended to take advantage of the positioning characteristics of the elements themselves! However, if you are dealing with a multi-element CSS animation, you may need to change the inertial thinking, and it is important “从以左上角为参考点变成以中心点为参考点” .
When we implement the multi-element animation effect, there are two types of roles: the container and the many animated elements inside the container.

Among them, for container elements, especially when doing mobile products, we will naturally have to center the positioning:

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

Upper left corner positioning (or upper right corner positioning):

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

Center point positioning + margin offset:

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