未央经验分享：多屏复杂动画CSS技巧

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

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

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

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

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

结果，发现自己留了一个坑，拿第2屏举例，桌面版，长这样，右侧动画内容并不是有效居中的：

本着高度还原设计稿的原则，所有动画元素都经过测量定位，按照PSD中的参考线左上角(left/top)，结果整体左侧冒出60像素：

于是，问题来了，当移动端做响应式适配时候，由于容器内的动画元素不是居中的，所以——

后来，进行了修改，内部动画元素整体居中，外部容器桌面端做左侧60像素偏移，于是，适配移动端时候，就正好是居中的啦。

②. 定位方式为居中定位
所谓“居中定位”是相对“传统定位”而言的。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;}

有同学可能要疑问了，why? 前面一步到位不挺好的，后面这样分两步走岂不是多余？

在大多数情况下，我们的应用场景比较单一，或只需要玩转移动端，或只需要驾驭桌面端，此时，上面两种定位的优劣是看不出来的。

但是，遇到一些复杂的应用场景，尤其涉及到容器尺寸或定位方式改变的时候，后面的定位优势就可以看出来。

比方说一开始提到的qzone5.0的例子，如果我们把容器宽度加大（实际是不会的，示意目的），如414像素：

会发现，宇航员和飞船在小行星之外了，也就是动画元素不是聚拢状态了。

所以，大家看出居中定位的优势来了没有：

1. 动画元素之间的位置关系不受容器尺寸影响；
2. 居中特性遭遇多场景时适应性更强；

还是拿去年年底做的「企业QQ-新年祝福」活动举例，第8屏：

其中，中间的“王强”和“马老板”这些数据有可能是没有的，也就是很有可能这一屏只有文字和宇航员，但同时还要保持整体垂直居中。很显然，宇航员和火箭所在的容器不能是绝对定位，否则脱离文档流，不能和上面元素保持合适垂直间距同时垂直居中。我们仍然有2种实现方法：

1. 固定容器宽度，例如350像素宽，然后，里面左上角定位等，本身margin: auto水平居中；
2. 容器不设定width大小，直接里面动画元素居中定位；

方法1问题在于：

1. 第7屏是类似结构，但是其动画容器宽度不是350像素，没法重用；
2. 当在iPhone5/iPhone5s下，屏幕320像素宽(小于350像素)，由于左上角定位，因此，整体不是居中效果；

而方法2，屏幕尺寸再小，也是居中的，只不过两侧有所剪裁。较终，移动端适配时候，我们不必关心定位问题，只要合适缩放就可以了：

首先，大家要明白，大宛网络（未央网站建设）文中所展示的三个技术技巧属于个人经验建议，注意，是建议。里面所提到的所有解决方法都有更加直观、通俗的实现，对于大多数的产品而言，技术的价值体现已经足够；同时应用场景千千万，没有什么一方通行的方法，例如居中定位准则，有时候，可能就是需要非居中定位。

但是，作为一个有技术追求的技术从业人员，对技术的精益求精一定是有价值的，无论是对自己，还是公司。有人可能会反驳，大宛网络（未央网站设计）明明只会针对移动端，你还花心思考虑0配的事情，岂不是白白浪费时间和人力成本。古人有云：“不以善小而不为”，这种去粗取精的小经验虽然看上去没什么实质性成长，对眼前项目也没多少价值体现，但是积累足够多，会产生质变的，填坑的事情少了，工作也更轻松与快乐，对公司产生的价值也更大。

高瞻远瞩积跬步，登峰造极至千里。

好了，以上就是大宛网络（未央网站设计）对于多屏CSS动画方面的一些技巧体会，希望可以对大家的学习有所帮助。当然，资历有限，要是文中有什么表述不有效的地方，欢迎指正；也欢迎针锋相对的讨论，共同成长。