css3常用属性animation-play-state的使用技巧

浏览器支持：
Internet Explorer 10、Firefox 以及 Opera 支持 animation-play-state 属性。
Safari 和 Chrome 支持替代的 -webkit-animation-play-state 属性。
注释：Internet Explorer 9 以及更早的版本不支持 animation-play-state 属性。
语法：animation-play-state: paused|running;
paused 规定动画已暂停。
running 规定动画正在播放。
下面讲解一下animation-play-state的使用技巧。
注：示例代码的私有前缀均省略，大家自行脑补
使用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: name1 1s; }
.active .element2 { animate: name2 1s; }
.active .element3 { animate: name2 1s; }
…
复制代码
从实现和功能上将，上面方法是很不错的，通俗易懂，不易犯错。不过我个人更喜欢使用配合CSS3的animation-play-state属性对每屏动画进行控制，实现如下：
动画相关CSS代码直接写在元素上：
.element1 { /* 尺寸与定位 */ animate: name1 1s; }
.element2 { /* 尺寸与定位 */ animate: name2 1s; }
.element3 { /* 尺寸与定位 */ animate: name3 1s; }
…
创建一个类名，如。animate,凡是使用到了animation动画的元素都添加这个类名；如下CSS代码：
复制代码
.animate {
    animation-play-state: paused;
}
.active .animate {
    animation-play-state: running;
}
复制代码
之所以个人更喜欢后面的方法，是因为有一种"无侵入"的感觉，代码层次清晰，控制关系明确。有利于后期的维护与扩展。
然而，使用animation-play-state还是有些需要注意的，对于IE10/IE11浏览器，animation-play-state是不能简写的。如：
.element { animate: shake 4s 2s both infinite paused; }
只会让整个CSS声明挂掉的！如下写法支持：
.element { 
    animate: shake 4s 2s both infinite;
    animation-play-state: paused;
}

有人可能要奇怪了，怎么突然IE浏览器乱入了？首先，我们不能无视主流手机之Windows Phone. 其次，帅气的翻屏动画并不是移动端专有，桌面端也适用。稍稍用力，桌面移动全适配，何乐而不为！

<div class="in_right_box">
<ul class="silder_list" >
<li>
<a href="http://yantai.changtu.com/" target="_blank">烟台汽车西站</a>
</li>
</ul>
</div>