常用CSS动画制作技巧及踩坑总结
1. CSS 3d透视
- perspective 属性都是加给父元素的
- transform-style：preserve-3d; 这个属性必须与transform一同使用，它使被转换的子元素保留其 3D 转换（即设置给父元素）
<!--这里是一个简单的透视的例子--> <div class="door-border"> <div class="door">我是门</div> </div>
.door-border{ border: 3px solid #aaa; width: 150px; height: 200px; perspective-origin: top; perspective: 200px; transform-style: preserve-3d; } .door-border .door{ border: 1px solid brown; width: 100%; height: 100%; background-color: wheat; transform: rotate3d(0,1,0,45deg); transform-origin: left; }
2. 元素本身有animation的属性时，transition 中在animation改变的属性会失效
有一次制作一个类似于上下浮动的小波浪动画，动画从界面下方进入，由于同时设置的transition和animate对元素的同一个属性进行了更改，触发了此问题。
解决办法：用伪元素或者嵌套父元素的方式将这两个行为分开 原理就是让transition和animation分别作用于不同的容器。
3. 表单标签没有伪元素
img标签也没有伪元素
4. z-index失效
5. 抖动动画制作
制作类似钱包抖动动画时，动画旋转角度可以从 -3deg -> 3deg -> -3deg -> 3deg 看起来比较顺畅
如果是 6deg -> 0deg -> -6deg -> 0deg 会在 0deg 时，动画有卡顿现象（即不要把中间值设置为关键帧）
6. 循环滚动动画原理
原理（一）：第一张与最后一张图完全相同，动画重复播放时没有时间间隔（纯CSS）
a. transformX(0) -> transformX(-50%) 浏览器正常 移动端(Safari)不播放动画 页面隐藏后才播放 切换时图片会闪一下 原因未知
b. transformX(0) -> transformX(-width(px)/2) 浏览器正常 移动端(Safari)播放动画 切换时图片会闪一下 原因未知
c. 用 margin-left: 0 -> margin-left: -50%（用left亦可，二者百分比值都是基于父元素宽度计算的） 浏览器正常 移动端(Safari)播放动画会卡顿（可能是性能导致）
目前采取c方案 控制卡顿在可接受范围内（由于书写循环动画时并没有考虑到浏览器重排带来的性能问题，故没有用绝对定位的元素来做测试）
a、b方案的应用场景可适当斟酌
原理（二）：三张相同的图片 原理与轮播图类似 三张图无限轮播效果（主JS）
PC端正常（要注意当前页面隐藏时取消定时器，否则会出bug），移动端未进行测试
7. 动画中需要用到background-image时，尽量用雪碧图
在工作中，有一个两张图相互切换的效果，最开始是用keyframe from background-image to background-image （即来回切换两张图片）来实现背景切换的 效果非常差，还会触发离开页面一张图片失效的bug，后来更换雪碧图后，得到流畅的两张图切换的效果。
如果想用background-image实现鼠标光标经变换图片效果（例如，灰色的关闭图鼠标经过后变成深色），则务必将这两张图片合并在一张图片上，除了减少请求外，这样做更重要的好处是交互体验更好了。如果图片不合在一起，当鼠标光标经过的时候，就会去请求另外一张图片的地址，如果这个图片没有被缓存，则请求发出去到照片显示是有一段时间的，很容易出现鼠标光标经过关闭图片，结果图片消失的情况，实际上图片不是消失了，而是还在请求的路上。--摘自《CSS世界》第9章
