CSS动画

动画的原理

定义：有很多静止的画面以一定的速度连续播放，肉眼因视觉残像产生错觉而误以为是活动的画面(帧)

CSS性能
如何查看渲染过程？
在控制台按下Esc，会出现一个新的控制台。

这样浏览器在渲染过程中就会把渲染的部分变绿。方块在不停右移
CSS渲染过程依次包含布局、绘制、合成。其中布局和绘制可能被省略。

浏览器的渲染过程

1. 根据HTML构建HTML树(DOM)
2. 根据CSS构建CSS树(CSSOM)
3. 将两棵树合并成一棵渲染树(render tree)
4. Layout布局(文档流)
5. Paint绘制(把边框颜色，文字颜色，阴影等画出来)

6. Compose合成(根据层叠关系展示动画)

   
   三种更新方式 第一种，全走一遍，比如div.remove()会触发当前消失，其他元素relayout
   第二种，跳过layout，比如改变背景颜色，直接repaint + composite
   

   第三种，跳过layout和paint，比如改变transform，只需要composite。
   注意：必须全屏查看效果，在iframe里看会有问题。
   用transform做动画比用left好，transform在渲染时没有repaint，比left性能好

transform全解

可以在MDN看详解
translate
常用写法：

• translateX(<length-percentage>)
• translateY(<length-percentage>)
• translate(<length-percentage>,<length-percentage>?)
• translateZ(<length>)且父容器perspective

• translate3d(x,y,z)
  

  绝对定位元素居中

scale缩放
一般用于360度旋转制作loading
搜索rotate MDN看文档
常用写法：

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

transition过渡
作用：补充中间帧
语法：

• transition: 属性名(宽高之类的) 时长 过渡方式(esay-out先快后慢等等) 延迟时间
• 可以用all代替所有属性

并不是所有属性都能过渡
display:block -> none无法过渡
一般用visibility: visible -> hidden
背景颜色也可以过渡

animation

@keyframes两种写法，一种是百分数，一种是from to
制作一颗跳动的心