动画

前端动画分为逐帧动画和补间动画，帧动画就是一帧帧画出来的动画，如JS动画，补间动画是设置开始和结束值即可，中间的变化由计算机自动计算填充，如过渡、C3的animation

做项目时发现使用JQ的animate()无法设置元素的旋转（rotate），后来才知道animate()只有数字值可创建动画（如margin:30px'），字符串值无法创建动画（如transform:'rotate(-90deg)'）
jQuery效果-animate()方法

• 位移transform不用加定位，但使用动画的必须是块级元素或行内块元素
• scale的转换也是有原点的，默认是以中心为原点缩放，要改变原点的话也是和rotate一样使用transform-origin
• 做动画的时候要分析每个节点的状态。动画播放完成状态控制，是要停在最终状态还是最初状态，默认backward表示回到原点，forward表示保持动画结束的状态
• rotate旋转后坐标轴也会旋转，先旋转会改变坐标轴，但先位移再旋转就不会出现这种问题
• 掐时间做延时完成动画的衔接,这种方式不好，因为上一个时间改了余下的时间都要改
  jq中利用回调函数解决了掐时间的问题，那css能不能监听动画或过渡的结束？可以
  css3中,过渡的结束用transitionend事件来监听，而动画用animationend事件来监听
• 做动画没思路时可去Animate.css官网参考别人的源码
• translate、scale、rotate和skew这四种常用的转换方式都是由 matrix 矩阵而来
  transform: matrix(a,b,c,d,e,f);
• 同理，动画速度也是由贝塞尔运动曲线而来，将几个特殊的速度用英文单词表示
  animation-timing-function: cubic-bezier(0,0,0,0);
  ease，先快后慢最后非常慢
  linear，匀速
  ease-in，速度越来越快
  ease-out，速度越来越慢
  ease-in-out，速度先快后慢
• 为什么2d转换能做的事要用3d转换来做，因为在移动端有硬件加速，使用3d转换可优化性能
• animation和transition最好不要同时对同一元素使用，否则可能看不到效果
• 转换（位移、缩放、旋转、倾斜）后元素的层级会变高