CSS怎么实现多屏复杂动画效果

本篇内容介绍了“CSS怎么实现多屏复杂动画效果”的有关知识，在实际案例的操作过程中，不少人都会遇到这样的困境，接下来就让小编带领大家学习一下如何处理这些情况吧！希望大家仔细阅读，能够学有所成！

创新互联主要从事成都网站设计、成都网站制作、外贸网站建设、网页设计、企业做网站、公司建网站等业务。立足成都服务南阳,十载网站建设经验,价格优惠、服务专业,欢迎来电咨询建站服务:18980820575

技巧一、使用animation-play-state控制每屏动画播放

1. 类名active与动画触发

首先，使用active触发每一屏的动画，几乎已经约定俗成，应该也建议成为默认的行业规范。

一般做法是，当对应一屏内容进入的时候，使用JS给容器添加类名active:

1	container.classList.add("active");

如果你做的动画逼格较高，希望每次浏览这一屏内容的时候，动画都走一遍，可以使用reflow重新触发一下animation:

1 2 3

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

2. 类名active与动画控制技巧

如何具体控制动画的播放呢？我们通常第一反应是使用下面的方法实现，动画的完整CSS代码在active状态下呈现，如：

1 2 3 4 5 6 7 8

.element1{/*尺寸与定位*/} .element2{/*尺寸与定位*/} .element3{/*尺寸与定位*/} ... .active.element1{animate:name11s;} .active.element2{animate:name21s;} .active.element3{animate:name21s;} ...

从实现和功能上将，上面方法是很不错的，通俗易懂，不易犯错。不过我个人更喜欢使用配合CSS3的animation-play-state属性对每屏动画进行控制，实现如下：

动画相关CSS代码直接写在元素上：

1 2 3 4

.element1{/*尺寸与定位*/animate:name11s;} .element2{/*尺寸与定位*/animate:name21s;} .element3{/*尺寸与定位*/animate:name31s;} ...

创建一个类名，如.animate，凡是使用到了animation动画的元素都添加这个类名；

如下CSS代码：

1 2 3 4 5 6

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

之所以个人更喜欢后面的方法，是因为有一种“无侵入”的感觉，代码层次清晰，控制关系明确。有利于后期的维护与扩展。

然而，使用animation-play-state还是有些需要注意的，对于IE10/IE11浏览器，animation-play-state是不能简写的。如：

1	.element{animate:shake4s2sbothinfinitepaused;}

只会让整个CSS声明挂掉的！如下写法支持：

1 2 3 4

.element{ animate:shake4s2sbothinfinite; animation-play-state:paused; }

有人可能要奇怪了，怎么突然IE浏览器乱入了？

首先，我们不能无视主流手机之Windows Phone. 其次，帅气的翻屏动画并不是移动端专有，桌面端也适用。稍稍用力，桌面移动全适配，何乐而不为！

技巧二、不同状态下的连续动画

有时候，动画可能不是一波流，分状态。

关键点就是动画分解与延时。

据我所知，没办法只使用一个keyframes关键帧声明就实现这个效果，因为，这里有动画状态的变化：一个只执行一次的动画和一个无限循环动画。

怎么办？我们可以将动画分解，写2个animation keyframes动画关键帧描述。

1 2	@keyframesfadeIn{/*...*/} @keyframesfloat{/*...*/}

① 提取公用动画

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

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

1 2 3

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

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

1 2 3 4

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

②避免变换冲突

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

1 2	@keyframesspin{/*transform:rotate...*/} @keyframeszoomIn{/*transform:scale...*/}

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

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

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

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

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

1 2	.element-wrap{animation:spin1s;}/*我转转转*/ .element{animation:zoomIn1s;}/*我大大大*/

技巧三、无侵入定位和居中定位准则

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变换的。

1 2 3 4

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

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

1 2 3 4

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

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

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

①. 元素定位在容器中间

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

举个简单例子，本文一开始展示的「企业QQ-新年祝福」活动。

企业产品用户特点比较鲜明：一是访问主要集中在桌面端，二是有70~80%用户使用的是webkit/blink内核浏览器。所以，大家可以理解为何设计稿明明针对桌面端，却有如此多细腻的动画设计了。

故事是这样的，桌面版做好了，1024-1224自适应，IE7以上都兼容（无侵入定位准则）（除了没动画），经验分享：多屏复杂动画CSS技巧三则！此时负责视觉的同学希望也能适配移动端，可以增加一定的传播，我觉得挺好的，于是，决定通过技术手段，让活动页面能游走于桌面和移动之间，同时，保证各种动画效果棒棒哒！

②. 定位方式为居中定位

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

我们在实现多元素动画效果时候，会出现两类角色：一是容器；二是容器里面诸多动画元素。

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

1 2 3 4

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

这样，各种尺寸的手机，我们都能让其居中显示（大尺寸可能需要一定的缩放）。

但是，我们有没有想过让容器里面的诸多动画元素也居中定位显示呢？

用代码来解释就是从左上角定位（或右上角定位）：

1 2 3

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

变成中心点定位+ margin偏移：

1 2 3 4

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

“CSS怎么实现多屏复杂动画效果”的内容就介绍到这里了，感谢大家的阅读。如果想了解更多行业相关的知识可以关注创新互联网站，小编将为大家输出更多高质量的实用文章！

网站标题：CSS怎么实现多屏复杂动画效果
分享URL：http://cdiso.cn/article/ieioss.html