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便可以实现更多天马行空的效果。