CSS动画

帧：每个静止的画面都叫做帧
播放速度：每秒24帧（影视）或者每秒30帧（游戏）

浏览器渲染过程

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

三棵树

样式更新一般用JS来更新样式

比如div.style.background = 'red'
比如div.style.display = 'none'
比如div.classList.add('red')
比如div.remove(直接删掉节点）

第一种的是要走完全部流程：例如 div.remove() 会触发当前消失，其他元素relayout
第二种是跳过 layout布局这一步，只需要走最后面的两步：例如改变背景颜色，直接repaint + composite
第三种，跳过layout和paint，只需要走最后一步composite。例如改变transform，只需composite。注意必须全屏查看效果,在iframe里看有问题

CSS动画优化

把left改为transform
jS优化：使用requestAnimationFrame代替setTimeout或setlntervl
CSS优化：使用will-change或translate 个人并不理解这个部分的内容老师说死记硬背下来就好了

1. transform

四个常用功能

位移 translate
缩放 scale
旋转 rotate
倾斜 skew 注意：

一般都需要配合transition过渡
inline元素不支持transform，需要先改变成block 好像是display：inlink-block 1.1 transform: translate 位移

translateX(像素(px) / 百分比(%))
translateY(像素(px) / 百分比(%))
translate(<像素 / 百分比>,<像素 / 百分比>)
translateZ(像素) 且父容器加perspective
translate3d(x,y,z) 经验：

多看MDN语法

translate(-50%,-50%)可做绝对定位元素居中

                    top:50%;
                    left:50%;
                    transform:translate(-50%,-50%);
                    <!--父元素必须设置了定位-->

1.2transform: scale 缩放

scaleX(倍数)
scaleY(倍数)
scale(倍数，倍数) 直接写数字没有单位

经验：用的较少，容易出现模糊

1.3 transform: rotate 旋转

rotate( )
rotateX( )
rotateZ( )
rotateY( )
rotate3d（）（这个比较复杂好像也不怎么用）默认顺时针方向旋转；里面填写的数值代表的是度数单位是deg

1.4 transform: skew 倾斜

skewX( )
skewY( )
skew( ) 里面填写的数值代表的是度数单位是deg

transform 元素之间可以组合使用

1.transform：scale（0.5）translate（-100%，-100%）；

注意：两个元素之间是用空格隔开

transform：none；取消所有

2. transition 过渡

作用：补充中间帧

语法 transition: 属性名时长过渡方式延迟 （中间用空格隔开）

可以用all代表所有属性

时长：指得是把动画过程完成所需要的时间单位为秒（s）或者毫秒（ms）
过渡方式：linear|ease|ease-in|ease-out|ease-in-out|cubic-bezier|step-start|step-end|steps
延迟：是用来设置动画开始之前的等待时间单位是秒（s）或者毫秒（ms）

注：并不是所有的属性都能过度

display: none => block 不能过渡
要改成visibility: hidden => visible
background 颜色可以过渡
opacity 透明度可以过渡

3. animation动画

语法： animation: 时长过渡方式延迟次数方向填充模式是否暂停动画名

（中间用空格隔开）

时长:动画过程完成的时长 s 或者 ms
过渡方式: 跟transition的取值一样
次数: 动画结束之后的循环次数可以随意设置数字或者 infinite 代表无限循环
延迟：动画开始前的延迟时间默认为0
方向: amimation-direction 规定动画在下一周期的播放方向默认值是normal 取值有 reverse | alternate | alternate-reverse normal每次都正向播放reverse 每次都反向播放；alternat奇数次正向播放，偶数次反向播；alternate-reverse偶数次正向播放，奇数次反向播。
填充模式: none | forwards | backwards | both
是否暂停: paused | running

这些属性都有对应的单独属性，可以进行单独的设置。语句可以百度，没有单独写出

3.1 @keyframes 完整语法

@keyframes 动画名称{ 0%{ //起始和结束状态缺少时,会以元素默认的状态为起始和结束状态

} ...中间可以定义无限关键帧也可以写成 from to 形式 100%{

}

} 例如图片所示

微信图片_20220426224923.jpg

CSS知识总结