h5 动画页面

伪元素上就不要作动画了，页面果真应该作一个测试一个啊

 

拿到设计稿一开始就先看看这个设计稿的布局，有一些是从页面顶部到底部都有效果的，这个时候就要考虑在 iPhone4 这样屏幕不够高的设备上如何保证页面完整呈现；或者在不影响交互的状况下，隐藏哪些元素。有的时候页面上元素比较集中，这个时候就要考虑在 iPhone6+ 这样的大屏幕设备上，要不要调整间距使得页面不会太空旷

 

zoom和transform:scale：

zoom 缩放的是被 zoom 的容器的视口，能够把它想象成放大镜的效果，这个属性是可被继承的，因此咱们作设备屏幕兼容的时候，能够在 body 标签下加一个 div 包裹住页面上的其余元素，而后在这个 div 上加 zoom，达到的视觉效果就是页面上其余元素也被缩放了。可是有些元素并不支持 zoom。

 

transform 属性应用到元素的过程实际上是矩阵变换的过程，在渲染的时候，元素的坐标就会被肯定下来，而后和 transform 的属性值进行矩阵运算获得最终的坐标，不过你会发现，一个绝对定位的元素经过 transform 改变显示位置后，这个元素的 tbrl 值并不会被更新，且 transform 属性不可继承的。

 

要想 transfrom: scale(x) 达到和 zoom 类似的效果，要记得把 transfrom-origin 设置成 0 0。这么设置的缘由是，在文档流中的元素，是以它的左上角为中心进行 zoom 的，而当元素脱离文档流时，要使 transform: scale(x) 和 zoom 达到相同的效果，还要具体分析 transform-origin 要如何设置。

 

为何 scale 会留下右部和底部的迷の白色呢？回到 transform 的定义中，“applied to the coordinate system an element renders in through the ‘transform’ property”。当元素都进行渲染了，坐标已经肯定了，再进行缩放，也就是在原来元素基础上改变大小。因此 .sf-index 虽然在渲染时四个角的位置分别是(0,0)、(100%,0)、(0,100%)、(100%, 100%)，通过以 (0,0) 为变换中心的 scale，就变成了(0,0)、(85%,0)、(0,85%)、(85%,85%)。咱们就会看到页面右边出现宽度为15%的一条白边，以及页面下方高度为15%的白边。

 

寻找动画灵感：

https://dribbble.com/             http://codepen.io/

 

其余兼容方法：

像须要大量图片的页面，作兼容的时候咱们经常担忧的是什么？固然是图片比例出问题咯，因此也会使用经过伪元素设置 padding-top 的方法，保证图片比例正常地显示出来。只是这样的写法一般要结合 background-size:cover; 而咱们经常使用的工具 CssGaga 在生成雪碧图了以后会覆盖 background-size。目前的这个方案的话……就不合成雪碧图了。

 

还有一个方案是使用 media query 结合 rem （或百分比）完成这样的布局，不过目前 gaga 不支持 background-size 的 rem，因此要采用什么方式合成雪碧图以及如何生成新的样式，还须要寻找新的方向。在不须要合成雪碧图的时候，能够用这两种方法。

 

伪元素真的是神同样的存在，一个标签自带两个儿子，不知道为何就有种金闪闪的感受。可是伪元素上的动画真的很坑

Android 上坑多，不要一次应用太多新技术。好比在魅族上用 flexbox 布局，就要加上 display: -webkit-box。还有一个教训就是，页面果真应该作一个测试一个

 

有个细节，安卓2.3.*不能良好支持-webkit-animation-fill-mode，也就是渐变更画不能中止在最后一帧。有这样一个解决方案：

1.用Modernizr去检测是否支持这个属性，加上识别类.no-animation-fill-mode；

2.根据识别类采起如下措施：
（1）用js模拟一样效果；
（2）用css屏蔽掉动画；
（3）或者直接所有都用transition来作（不要keyframes）。

 

Android手机的屏幕碎片化很是严重，各类各样的分辨率很是之多，那么如何让游戏能够适配这些机型就显得尤其重要。这里也是前先后实验了多种方案。先想到用JS来动态的根据分辨率来设置相关元素的大小，但要么在某些机型中获取失败，要么用赋值缩放相关元素时形成游戏崩溃……用 absolute 来解决：

关键代码：

1 2 3 4 5 6 7 8

.game { position: absolute; top: 0; bottom: 0; left: 0; right: 0; overflow: hidden; }

以上代码使游戏容器绝对定位以后，上下左右四边都与手机屏幕贴紧，从而作到了适配各类屏幕。
而后使用 background-size:cover; 让背景覆盖全屏，此代码可使背景 自动缩放 至 覆盖 容器大小。

 

 为了适应各类屏幕，应该使用动态居中的布局，而不是传统页面的左上角为基准：

.welcome { position: absolute; top: 50%; left: 50%; margin: -100px 0 0 -111px; background-image: url("img/wel.png"); width: 222px; height: 200px; }

 

但愿每次浏览这一屏内容的时候，动画都走一遍，可使用reflow从新触发一下animation:

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

 

animation-timing-function:steps(4, start); 

第一个参数必须为正整数，指定函数的步数。第二个参数取值能够是start或end，指定每一步的值发生变化的时间点。第二个参数是可选的，默认值为end。

每一帧变化会自动计算取平均值。

原理仍是在不断的移动背景图片，但每种背景会保留一段时间，经过他咱们能够方便的制做帧动画