CSS动画

今天我要总结的是有关于CSS动画相关的知识已经一些注意点。
CSS中的动画离不开浏览器的渲染，首先先介绍一下浏览器的渲染相关的问题。

浏览器的渲染

首先是浏览器的渲染过程：

根据HTMl 构建HTML树（DOM）
根据CSS构建CSS树（CSSOM）
将两颗树合并成一颗渲染树（render tree）
Layout布局（文档流、盒模型、计算大小和位置）
Paint绘制（把边框颜色、文字颜色、阴影等画出来）
Composite合成（根据层叠关系展示画面）

以下为图解：

截屏2022-07-09 11.57.49.png

如何更新

接下来涉及到的是如果我们需要修改动画如何做到更新呢？一般来讲我们采用JS来进行样式更新，而且加类比加样式更方便一点。
有三种更新方式，

第一种：全走
div.remove()会触发当前消失，其他元素relayout
第二种：跳过layout
改变背景颜色，直接repaint+composite
第三种跳过layout和paint
改变transform，只需要composite（注意要全屏查看效果）
以下为图解：

截屏2022-07-09 12.07.08.png

CSS优化

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

CSS动画的两种做法

我们通过transform可以实现元素由a状态到达b状态，但是我们看不到变化的过程，这时我们需要添加transition属性，来让变化可视。

transition属性

transtion属性的作用是补充关键帧。
下面有关它的语法：

transition：属性名时长过渡方式延迟

transition: left 200ms linear;

可以用逗号分隔两个不同的属性

transition: left 200ms, top 400ms;

可以用all代表所有属性

transition: all 200ms;

其中它的过渡方式有：

linear 线性变化（匀速）
ease 缓动
ease-in 淡入
ease-out 淡出
ease-in-out 淡入且淡出
cubic-bezier 定时函数
step-start
step-end
steps
一些注意事项：
display：none=>block 无法过渡
一般改成visibility：hidden=>visible （不用display）
background颜色可以过渡
opacity透明度可以过渡
过渡必须有起始比如hover和非hover状态的过渡
但是如果除了起始，还有中间点的情况，两种办法：
第一种：使用两次transform
a===transfom===>b
b===transform===>c
使用setTimeout或者监听transitionend事件来知道到了中间点

    <style>
        #demo {
            width: 100px;
            height: 100px;
            margin: 50px;
            border: 1px solid red;
            transition: transform 1s linear;
        }

        #demo.b {
            transform: translateX(200px);
        }

        #demo.c {
            transform: translateX(200px) translateY(200px);
        }
    </style>

做好动画，下面是js代码

    <script>
        button.onclick = () => {
            demo.classList.add('b')
            setTimeout(() => {
                demo.classList.add('c')
            }, 1000)
        }
    </script>

即可实现上述要求
第二种用法是使用animation

animation

作用：声明关键帧，添加动画
animation的缩写语法
animation：时长｜过渡方式｜延迟｜次数｜方向｜填充模式｜是否暂停｜动画名

时长：1s或者1000ms
过渡方式：与transition取值一样，比如linear
次数：3或者2.4或者infinite（无限）
方向：reverse（反向）｜alternate(交替)｜alternate-reverse
填充模式：none｜forwards｜backwards｜both
是否暂停：paused｜running
以上所有属性均有对应的单独属性

@keyframes完整语法

一种是from to

@keyframes xxx {
from {
transform: translateX(0%);
}

to {
transform: translateX(100%);
}
}

另一种是百分数

@keyframes xxx {
0% {
top: 0;
left: 0;
}

50% {
top: 50px;
}

100% {
top: 100px;
left: 50px;
}

注意：加个forawards即可以实现让动画停留在最后一帧

我们在使用CSS的时候虽然CSS的属性比较简单，但是它们组合起来却可以实现很复杂的效果，所以说，CSS的上限取决于我们的想象力，只要我们的想象力足够丰富，那么CSS便可以实现更多天马行空的效果。