当下css3应用已经相当广泛，其中重要成员之一就是css3动画。并且，随着CSS动画的逐渐深入与普及，更复杂与细腻的动画场景也如雨后春笋般破土而出。例如上个月做的「企业QQ-新年祝福」活动：
感谢shirley帮忙录制上面的视频，虽然视频内容是手机上的显示效果，但是，这个“企业新年祝福活动”原本只针对桌面端，移动端是后来辅助增强（增加了相当于活动页面UV 5.7%的点击）。而目前大多数类似页面只针对移动端，例如其他同事实现的QQ空间5.0预约页第二版：
扫码(需登录)或者链接二选一：
访问demo戳这里
因此，需要多一点适配的技巧。但是，对于动画效果实现，其实都是一脉相承的，最终的实现需要很多点滴积累，我这里讲三个部分同学可能不知道的相关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: 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。其次，帅气的翻屏动画并不是移动端专有，桌面端也适用。稍稍用力，桌面移动全适配，何乐而不为！
技巧二、不同状态下的连续动画有时候，动画可能不是一波流，分状态。
例如，我们的小火箭，先是淡出动画，然后无限上下悬浮。怎么实现呢？
关键点就是动画分解与延时。
据我所知，没办法只使用一个keyframes关键帧声明就实现这个效果，因为，这里有动画状态的变化：一个只执行一次的动画和一个无限循环动画。
怎么办？我们可以将动画分解，写2个animation keyframes动画关键帧描述。
@keyframes fadeIn { /* ... */ }@keyframes float { /* ... */ } 然后，再分别应用这些关键帧动画。如何应用呢？有2个小技巧：
1. 逗号与多animation动画值如下：
小火箭
查看更多关于HTML5技术实现教程：多屏CSS动画精进技巧_html/css_WEB-ITnose的详细内容...
声明：本文来自网络，不代表【好得很程序员自学网】立场，转载请注明出处：http://www.haodehen.cn/did115096