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>