animation-play-state属性(CSS设置暂停动画)
animation-play-state属性
1.类名active与动画触发
首要，运用active触发每一屏的动画，简直已经约定俗成，应该也主张成为默许的行业标准。
一般做法是，当对应一屏内容进入的时分，运用JS给容器增加类名active:
container.classList.add("active");
假如你做的动画逼格较高，希望每次阅读这一屏内容的时分，动画都走一遍，能够运用reflow从头触发一下animation:
container.classList.remove("active");
container.offsetWidth=container.offsetWidth;
container.classList.add("active");
2.类名active与动画操控技巧
怎样详细操控动画的播放呢？咱们通常榜首反应是运用下面的办法完成，动画的完好CSS代码在active状况下呈现，如：
.element1{/*尺度与定位*/}.element2{/*尺度与定位*/}.element3{/*尺度与定位*/}....active.element1{animate:name11s;}.active.element2{animate:name21s;}.active.element3{animate:name21s;}...
从完成和功用上将，上面办法是很不错的，通俗易懂，不易犯错。不过我个人更喜爱运用合作CSS3的animation-play-state特点对每屏动画进行操控，完成如下：
动画相关CSS代码直接写在元素上：
.element1{/*尺度与定位*/animate:name11s;}.element2{/*尺度与定位*/animate:name21s;}.element3{/*尺度与定位*/animate:name31s;}...
创立一个类名，如.animate，凡是运用到了animation动画的元素都增加这个类名；如下CSS代码：
.animate{animation-play-state:paused;
}.active.animate{animation-play-state:running;
}
之所以个人更喜爱后面的办法，是因为有一种“无侵入”的感觉，代码层次清晰，操控关系清晰。有利于后期的保护与扩展。
可是，运用animation-play-state仍是有些需求留意的，关于IE10/IE11阅读器，animation-play-state是不能简写的。如：
.element{animate:shake4s2sbothinfinitepaused;}
只会让整个CSS声明挂掉的！如下写法支撑：
.element{animate:shake4s2sbothinfinite;animation-play-state:paused;
}
有人或许要奇怪了，怎样突然IE阅读器乱入了？首要，咱们不能无视干流手机之WindowsPhone.其次，帅气的翻屏动画并不是移动端专有，桌面端也适用。稍稍用力，桌面移动全适配，何乐而不为！
不同状况下的接连动画
有时分，动画或许不是一波流，分状况。
例如，咱们的小火箭，先是淡出动画，然后无限上下悬浮。怎样完成呢？
关键点便是动画分解与延时。
据我所知，没办法只运用一个keyframes关键帧声明就完成这个作用，因为，这儿有动画状况的改变：一个只履行一次的动画和一个无限循环动画。
怎样办？咱们能够将动画分解，写2个animationkeyframes动画关键帧描绘。
@keyframesfadeIn{/*...*/}@keyframesfloat{/*...*/}
然后，再分别运用这些关键帧动画。怎样运用呢？有2个小技巧：
1.逗号与多animation动画值
如下：
divclass="element">小火箭
.element{animation:fadeIn1s,float.5s1sinfinite;}/*我淡出,需求1秒；我1秒后开端无限漂浮*/
其间float.5s1sinfinite这儿的1s便是无限漂浮动画履行延迟的时刻，所以，两个动画完美合作，感觉就像是一个动画。实际上，便是一个动画，所有CSS3animation动画走同一个UI线程，这也是为何引荐运用CSS完成动画作用的原因。
此写法没有兼容性问题，大家能够开开心心肠运用。
2.标签嵌套与独立动画
咱们还能够经过嵌套标签的方法完成接连动画，例如：
class="element-wrap"><divclass="element">小火箭div>div>.element-wrap{animation:fadeIn1s;}/*我淡出,需求1秒*/.element{animation:float.5s1sinfinite;}/*我1秒后开端无限漂浮*/
有人或许会奇怪了。animation本身就支撑多动画并行，你还搞个标签嵌套，没有任何运用的理由啊！没错，单纯看咱们这个例子，的确是这样。可是：
①提取共用动画
这类多屏动画是有N多元素一起履行不同的动画。比方说，火箭是淡出，然后上下漂浮；火箭的火焰是淡出，然后巨细改变；黑洞是淡出，然后左右随波。你怎样完成？
假如朴实凭借animation语法，应该是：
.element1{animation:fadeIn1s,float.5s1sinfinite;}/*我淡出,需求1秒；我1秒后开端无限漂浮*/.element2{animation:fadeIn1s,size.5s1sinfinite;}/*我淡出,需求1秒；我1秒后开端巨细改变*/.element3{animation:fadeIn1s,move.5s1sinfinite;}/*我淡出,需求1秒；我1秒后开端左右移动*/
能够看到，淡出是共用的动画作用，咱们能够凭借嵌套标签，完成共用语法的兼并，方面后期保护：
.element-wrap{animation:fadeIn1s;}/*大家都1秒淡出*/.element1{animation:float.5s1sinfinite;}/*我1秒后无限漂浮*/.element2{animation:size.5s1sinfinite;}/*我1秒后忽大忽小*/.element3{animation:move.5s1sinfinite;}/*我1秒后左右移动*/
②避免改换抵触
有个元素动画是边360度旋转、边扩大(从0扩大到100%)，像这种具有典型特征的动画咱们明显要独立提取与共用的：
@keyframesspin{/*transform:rotate...*/}@keyframeszoomIn{/*transform:scale...*/}
好了，现在问题来了，边扩大边旋转：
.element{animation:spin1s,zoomIn1s;}/*旋转：啊，完蛋啦，我被扩大掩盖啦！*/
由于都是运用transform,产生了残暴的掩盖。当然，有好事的人会说，你运用zoom不就好了！的确，假如只是移动端，运用zoom的确棒棒哒！可是，咱们这个企业活动，PC是主战场，因此，FireFox阅读器（FF不识zoom）是不能无视的。
怎样办？从头建一个名为spinZoomIn的动画关键帧描绘仍是？
对啊，你直接外面套一层标签不就万事大吉了
.element-wrap{animation:spin1s;}/*我转转转*/.element{animation:zoomIn1s;}/*我大大大*/
无侵入定位和居中定位原则
1.这儿的“无侵入定位”指不受animation影响的元素定位，包括两部分：一是不运用keyframes关键帧决议初始位置；二是不要运用keyframes中呈现的特点定位。
①.不运用keyframes决议初始位置
应该都知道，CSS3animation的fill-mode能够决议元素动画完毕前后的位置，也便是也具有定位的作用。此刻，或许就会有小伙伴，故作聪明，运用animationkeyframes0%{}或form{}去做定位，貌似，还省了写代码。看上去很赞，实际上狭窄了，这关于对animation支撑不佳或不支撑的阅读器实际上是不友好的，例如Android2.3不支撑animation-fill-mode,IE6-IE9不支撑CSS3animation，所以乎，当遭遇这些阅读器的时分，页面动画元素的布局实际上是毁掉的。所以，这些动画元素定位的时分，需求运用“无侵入定位”，也便是，就算页面没有animation,我也是个“美丽人儿”。
②.不运用keyframes中呈现的特点定位
举个例子，有个球，正好定位在模块的中心，一起有个无限旋转作用。运用transform:translate(-50%,-50%)居中定位再合适不过了，不用我心里难过，所以，运用了transform定位。此刻，抵触产生，旋转动画也是需求transform改换的。
@keyframesspin{0%{transform:rotate(0);}100%{transform:rotate(360deg);}}
要么运用业界约定俗成spin掩盖，要么重整旗鼓没法重用：
@keyframesspin-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,它有两个值：
{
animation-play-state:paused;//暂停动画
animation-play-state:running;继续播映动画
}
注意：在增加上面这个特点的时分，也要增加动画特点，才能收效
示例：
//界说了动画类和暂停类
.animationStyle{
animation:my-rotate5slinearinfinite;
}
.pause{
animation-play-state:paused;
}
@keyframesmy-rotate{
0%{transform:rotate(0)}
25%{transform:rotate(90deg)}
50%{transform:rotate(180deg)}
75%{transform:rotate(270deg)}
100%{transform:rotate(360deg)}
}
//在进行动画播映和暂停时，需要重新设置类名实现
methods:{
play(){
letaudio=document.querySelector("#audio");
letalbumImg=document.querySelector("#albumImg");
audio.play();
this.animationStyle="animationStyle";
this.getCurrentTime();
},
stop(){
letaudio=document.querySelector("#audio");
letalbumImg=document.querySelector("#albumImg");
audio.pause();
//增加pause类的一起，animationStyle也不能少
this.animationStyle="pauseanimationStyle";
优秀作品：
最新作品：
评论列表（共270人参与）参与讨论或分享设计作品获得视觉癖积分奖励
CK是黑注册会员
2021-06-04 3:30:42
维护的目标，是指依法应颁发专利权的外观规划。它与发明或实用新型彻底不同，即外观规划不是技术方案。我国《专利法》第二条中规定：外观规划，是指对产品的animation-play-state属性有一只风筝飞起来了！是一只蝙蝠型的风筝，那风筝飞得高高的，越。。。
片 防溺水手游客
2021-06-04 20:59:40
游客51268：animation-play-iv> ●animation-iteration-count：规则动画应该播映的次数。 ●animation-direction：规则是否应该轮那几句中文。 17、每天都看着不同口味的安眠药在讲台上走来走去。 18、肉长出来还能够减，但
回复
，让你的注册会员
2021-06-04 6:25:5
/div> 假如你做的动画逼格较高，希望每次阅读这一屏内容的时分，动画都走一遍 简介：在线海报制作平台，界面简洁清新，提供多种模板修改制作，设计感较强，部分模板需要付费才能使用。 7.素彩
回复