CSS动画动画是由许多静止的画面（帧），以一定的速度（如每秒30张）连续播放时，肉眼因视觉残像产生错觉，而误以为时活动

动画

是由许多静止的画面（帧），以一定的速度（如每秒30张）连续播放时，肉眼因视觉残像产生错觉，而误以为时活动的画面。
帧：每个静止的画面叫做帧；
播放速度：每秒24帧（影视）或者每秒30帧（游戏）.

浏览器渲染原理

参考文章
- 渲染树构建、布局及绘制 | Web | Google Developers
- 渲染性能 | Web | Google Developers
- 使用transform来实现动画 | Web | Google Developers
- 查看CSS各属性触发什么——CSS Triggers
浏览器渲染过程
- 根据HTML构建HTML树（DOM）
- 根据CSS构建CSS树（CSSOM）
- 将两棵树合并成一颗渲染树（render tree）
- Layout布局（文档流、盒模型、计算大小和位置）
- Paint绘制（把边框颜色、文字颜色、阴影等画出来）
- Compose合成（根据层叠关系展示画面）
三棵树示意图

三棵树.png

如何更新样式
- 一般用JS更新样式，比如：
  - div.style.background='red'设置div的背景颜色样式
  - div.style.display='none'设置div的display样式
  - div.classList.add('red')给div添加类名为red类
  - div.remove()直接删掉节点
- 以上JS更新样式的例子方法有什么不同吗？
  - 有三种不同的渲染方式
    - 如下图，第一种，都走一遍。而div.remove()方法就会触发当前消失，其他元素relayout。
    - 第二种，跳过layout。改变背景颜色会直接repaint+composite
    - 第三种，跳过layout和paint。改变transform，只需composite。注意必须全屏查看效果，在iframe里看有问题。

CSS动画优化——( | Web | Google Developers)

- JS优化——使用requestAnimationFrame代替setTimeout或setInterval
- CSS优化——使用will-change或translate

transform

transform属性允许你旋转（rotate），缩放（scale），倾斜（skew）或平移（translate）给定元素
一般需要配合transition过渡
inline元素不支持transform，需要先变成block
translate,平移

transform: translateX(10px/10%) translateY(10px/10%);
transform: translate(50%,50);/*表示translateX,translateY的缩写,该数值可做绝对定位元素的居中*/
transform: translateZ(10px)；/*且父容器添加perspective:10px;,指定了观察者与 z=0 平面的距离，使具有三维位置变换的元素产生透视效果*/
transform: translate3d(x,y,z);/*在X,Y,Z三轴上距离的缩写*/

scale，缩放（用的比较少，因为容易出现模糊）

scaleX(number)
scaleY(number)
scaleZ(number)
scale(x,y,z)/*两个数值就代表X，Y*/

rotate，旋转
- rotate3D (饥人谷JS Bin (jirengu.com))

rotate([<angle> | <zero>])
rotateZ([<angle> | <zero>])
rotateX([<angle> | <zero>])
rotateY([<angle> | <zero>])

skew，倾斜，用的较少，需要时查看MDN文档

skewX([<angle> | <zero>])
skewY([<angle> | <zero>])
skew([<angle> | <zero>],[<angle> | <zero>]?)

transform多种效果
- 组合使用，transform: (scale(0.5) translate(100px,10%));
- transform: none;取消所有
transition 过渡
- 用于补充中间帧，即将瞬间的动作增加时间，看起来是在一步步的动
- 语法
  - transtion: 属性名时长过渡方式延迟;——transtion: left 200ms linear;
  - 用逗号分隔连个不同属性，即tarnstion: left 2000ms,top 200ms;
  - 用all代表所有属性，transtioni: all 200ms;
  - 过渡方式查看mdn
- 注意
  - 不是所有属性都能过渡
    - display:none=>block就没法过渡，改成visibility:hidden=>visible;
过渡必须要有起始，一般只有一次动画，或者两次，比如hover和非hover状态的过渡，如果还有中间点，可以使用以下两种办法
- 使用两次transform，[示例](饥人谷JS Bin (jirengu.com))，步骤是a-transform->b,b-transform->c,通过setTimeout或者监听transitionend事件得知到达中间点。
怎么让动画停在最后一帧，[示例](饥人谷JS Bin (jirengu.com))
animation
- 缩写语法
  - animation: 时长|过渡方式|延迟|次数|方向|填充模式|是否暂停|动画名
    - 时长：1s或者1000ms；
    - 过渡方式：跟transition的过渡方式取值一样；
    - 次数：3或者2.4或者infinite(无限)；
    - 方向：reverse|alternate|alternate-reverse;
    - 填充模式:none|forwards|backwards|both;
    - 是否暂停:paused|running;
    - 以上所有属性都有对应的单独属性

 @ketframes 动画名{
     from{
         transform:translateX(0%);
     }
     to{
         tansform:translateX(%)
     }
 }/*先设置一个动画步骤，上面from到to是一种写法，还有写法是百分数(0%{top:0;}100%{top:100px};)*/

资料来源：饥人谷；