CSS3动画

动画原理

由许多静止的画面(帧)组成，以一定的速度(如每秒30张)连续播放时肉眼因视觉残像产生错觉而误以为时候懂得画面

例子1

<div id="demo" style="border:1px solid red;width:50px;height:50px;position:relative;"></div>
<script>
    let n = 1
    let id = setInterval(()=>{
        if(n<=100){
            demo.style.left = 1 +'px'
        }else{
            clearInterval(id)
        }
    },1000/60)
</script>

每过一段时间用setInterval将div移动一小段距离，直到目标地点
控制台Rendering勾选Paint flashing,注意绿色表示重新渲染

例子1移动过程中一直是绿色

例子2

#demo{
    width:100px;
    height:100px;
    border:1px solid red;
    transition:all 1s linear;
}
#demo{
    transform:translateX(200px)
}

例子2移动过程中是白色，只有从开始和结束是绿色，说明值渲染了3次

浏览器渲染原理

参考Google团队写的文章

1. 根据HTML构建HTML树(DOM)
2. 根据CSS树构建CSS树(CSSOM)
3. 将两颗树合成一个渲染树(render tree)
4. Layout布局(文档流/盒模型/计算大小和位置)(render tree)
5. Paint绘制(吧边框颜色/文字颜色/阴影等画出来)
6. Compose合成(根据层叠关系展示画面)

如何更新样式

一般我们用JS来更新样式

1. div.style.background="red"
2. div.style.display="none"
3. div.classList.add("red")
4. div.remove()直接删除节点

这些方法有三种不同的渲染方式

1.div.remove() 全走，会触发当前消失,其他元素relayout

2.改变背景颜色 跳过layout，改变背景颜色直接repaint+composite

2.改变transform 只需composite

JS优化: 使用requestAnimationFrame代替setTimeout或者setinterval

css优化: 使用will-change或者translate

css性能网址
Google官方文档

transform

四个常用功能

1. 位移 translate

   xy的移动相对好理解，Z的取值需要加个父级元素作为视点。父级元素CSS{perspective:1000px;border:1px solid red}

2. 缩放 scale
3. 旋转 rotate
4. 倾斜 skew

细节：一般都需要配合transition过渡，inline元素不支持transform，需要先变成block

animation

声明关键帧 @keyframes xxx{添加关键帧}
CSS选择器添加animation：xxx | 动画时间 | liner | 延迟时间 | 次数 | 方向 | 填充模式