Tips for using css3 common attribute animation-play-state

animation-play-state introduction

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

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

Browser support:
Internet Explorer 10, Firefox and Opera supports the animation-play-state attribute.
Safari and Chrome support the alternative -webkit-animation-play-state property.
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 explains the usage skills of animation-play-state.
Note: The private prefixes of the sample codes are omitted, everyone can make up their own minds

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

1 . Class name active and animation trigger
First of all, using active to trigger animation on each screen has almost become a common practice, and it should also be recommended to become the default industry norm.
The general approach is to use JS to add the class name active to the container when the content corresponding to one screen is entered:

container.classList.add("active");

If you make animations The price is high. I hope that the animation will go through every time I browse the content of this screen. You can use reflow to re-trigger itanimation:

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

2. Class name active and animation control skills
How to specifically control the playback of animation? Our first reaction is usually to use the following method to achieve it. The complete CSS code of the animation is presented in the active state, such as:

.element1 { /* 尺寸与定位 */ }.element2 { /* 尺寸与定位 */ }.element3 { /* 尺寸与定位 */ }...
 
.active .element1 { animate: name1 1s; }.active .element2 { animate: name2 1s; }.active .element3 { animate: name2 1s; }...

In terms of implementation and function, the above method is very good, easy to understand, and not easy to make mistakes. However, I personally prefer to use the animation-play-state attribute with CSS3 to control the animation on each screen. The implementation is as follows:

Animation Related CSS Code is written directly on the element:

.element1 { /* 尺寸与定位 */ animate: name1 1s; }.element2 { /* 尺寸与定位 */ animate: name2 1s; }.element3 { /* 尺寸与定位 */ animate: name3 1s; }...

Create a class name like .animate, all elements that use animation animation will add this class name; as follows CSS Code:

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

The reason why I personally prefer the latter method is because it has a "non-invasive" feeling, the code level is clear, and the control relationship is clear. Conducive to later maintenance and expansion.

However, there are still some things to note when using animation-play-state, for IE10/IE11 browsers , animation-play-state cannot be abbreviated. For example:

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

will only make the entire CSS statement hang! The following writing method is supported:

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

Some people may be wondering, why suddenly the IE browser is messed up? First of all, we cannot ignore the Windows Phone of mainstream mobile phones. Secondly, the handsome flipping animation is not exclusive to mobile terminals, it is also applicable to desktop terminals. With a little effort, it can be fully adapted to desktop and mobile applications, so why not!

Continuous animation in different states

Sometimes, the animation may not be a wave, but divided into states.
For example, our little rocket first fades out of animation, and then floats up and down infinitely. 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 using only one keyframes keyframe statement, because there are changes in animation state: one is only executed once animation and an infinite loop animation.

what to do? We can break down the animation and write 2 animation keyframes animation keyframe descriptions.

@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 ​​
are as follows:

p class="element">小火箭</p>
 
.element { animation: fadeIn 1s, float .5s 1s infinite; }  /* 我淡出, 需要1秒；我1秒后开始无限漂浮 */

float .5s 1s infinite1s here is the execution delay time of the infinite floating animation , so the two animations cooperate perfectly and feel like one animation. In fact, it is an animation. All CSS3 animation animations run on the same UI thread, which is why it is recommended to use CSSThe reason for achieving animation effects.

There are no compatibility issues with this writing method, and everyone can use it happily.

2. 标签嵌套与独立动画
我们还可以通过嵌套标签的形式实现连续动画，例如：

<p class="element-wrap"><p class="element">小火箭</p></p>
 
.element-wrap { animation: fadeIn 1s; }          /* 我淡出, 需要1秒 */.element { animation: float .5s 1s infinite; }   /* 我1秒后开始无限漂浮 */

有人可能会奇怪了。animation本身就支持多动画并行，你还搞个标签嵌套，没有任何使用的理由啊！没错，单纯看我们这个例子，确实是这样。但是：

① 提取公用动画
这类多屏动画是有N多元素同时执行不同的动画。比方说，火箭是淡出，然后上下漂浮；火箭的火焰是淡出，然后大小变化；黑洞是淡出，然后左右随波。你如何实现？

如果纯粹借助animation语法，应该是：

.element1 { animation: fadeIn 1s, float .5s 1s infinite; }  /* 我淡出, 需要1秒；我1秒后开始无限漂浮 */.element2 { animation: fadeIn 1s, size .5s 1s infinite; }   /* 我淡出, 需要1秒；我1秒后开始大小变化 */.element3 { animation: fadeIn 1s, move .5s 1s infinite; }   /* 我淡出, 需要1秒；我1秒后开始左右移动 */

可以看到，淡出是公用的动画效果，我们可以借助嵌套标签，实现公用语法的合并，方面后期维护：

.element-wrap { animation: fadeIn 1s; }          /* 大家都1秒淡出 */.element1 { animation: float .5s 1s infinite; }  /* 我1秒后无限漂浮 */.element2 { animation: size .5s 1s infinite; }   /* 我1秒后忽大忽小 */.element3 { animation: move .5s 1s infinite; }   /* 我1秒后左右移动 */

 

②避免变换冲突
有个元素动画是边360度旋转、边放大(从0放大到100%)，像这种具有典型特征的动画我们显然要独立提取与公用的：

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

好了，现在问题来了，变放大边旋转：

.element { animation: spin 1s, zoomIn 1s; }  /* 旋转：啊，完蛋啦，我被放大覆盖啦！ */

由于都是使用transform, 发生了残忍的覆盖。当然，有好事的人会说，你使用zoom不就好了！确实，如果只是移动端，使用zoom确实棒棒哒！但是，我们这个企业活动，PC是主战场，因此，FireFox浏览器（FF不识zoom）是不能无视的。

怎么办？重新建一个名为spinZoomIn的动画关键帧描述还是？

对啊，你直接外面套一层标签不就万事大吉了

.element-wrap { animation: spin 1s; }   /* 我转转转 */.element { animation: zoomIn 1s; }      /* 我大大大 */

无侵入定位和居中定位准则

1. 这里的“无侵入定位”指不受animation影响的元素定位，包含两部分：一是不使用keyframes关键帧决定初始位置；二是不要使用keyframes中出现的属性定位。

①. 不使用keyframes决定初始位置
应该都知道，CSS3 animation的fill-mode可以决定元素动画结束前后的位置，也就是也具有定位的作用。此时，可能就会有小伙伴，故作聪明，利用animation keyframes 0% {}或form {}去做定位，貌似，还省了写代码。看上去很赞，实际上狭隘了，这对于对animation支持不佳或不支持的浏览器实际上是不友好的，例如Android2.3不支持animation-fill-mode, IE6-IE9不支持CSS3 animation，于是乎，当遭遇这些浏览器的时候，页面动画元素的布局实际上是毁掉的。所以，这些动画元素定位的时候，需要使用“无侵入定位”，也就是，就算页面没有animation, 我也是个“标致人儿”。

②. 不使用keyframes中出现的属性定位
举个例子，有个球，正好定位在模块的中心，同时有个无限旋转效果。使用transform: translate(-50%,-50%)居中定位再合适不过了，不用我心里难受，于是，使用了transform定位。此时，冲突发生，旋转动画也是需要transform变换的。

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

要么使用业界约定俗成spin覆盖，要么另起炉灶没法重用：

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

显然，都是不合适的。建议使用传统left/top/margin进行定位，与transform变换动画“无侵入”。

 

2. 这里的“居中定位准则”包含两部分：一是元素定位在容器中间位置；二是元素的定位方式为居中定位。

①. 元素定位在容器中间
容器以及容器内的动画元素可以看成是一个动画模块，为了这个模块可以轻松驾驭水平布局和垂直局部，里面的动画元素形成的整体一定要在容器的中间，不要被设计稿或周围环境影响。

②. 定位方式为居中定位
所谓“居中定位”是相对“传统定位”而言的。Web页面中的模块、文字什么的默认都是相对于左上角堆砌的，所以，很自然地，我们在重构页面，做布局，写交互效果的时候，也都是相对左上角定位。活用元素本身的定位特性，这是很赞的也推荐这么做！但是，如果你和多元素CSS动画打交道，可能就需要改变下惯性思维了，很重要的一点就是“从以左上角为参考点变成以中心点为参考点”。
我们在实现多元素动画效果时候，会出现两类角色：一是容器；二是容器里面诸多动画元素。

其中，对于容器元素，尤其在做移动端产品时候，我们很自然会让其居中定位：

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

 

左上角定位（或右上角定位）：

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

 

中心点定位+ margin偏移：

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

更多css3常用属性animation-play-state的使用技巧 相关文章请关注PHP中文网！