1.动画原理

定义

动画：由许多禁止的画面（帧），以一定的速度连续播放时肉眼产生的错觉而误以为是活动的画面。帧：每个静止的画面。

2.浏览器渲染原理

步骤

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

三种更新样式方法

微信图片_20220324220359.jpg

参考

浏览器详细渲染原理可以参考这个链接：developers.google.com/web/fundame…
查看CSS触发啥：csstriggers.com/

3.transform的常用功能

位移translate

translateX(<length-percentage>)
translateY(<length-percentage>)
translateZ(<length-percentage>)且父容器perspective
translate3d(x,y,z)
translateX(<length-percentage>,<length-percentage>?)

！！！！！！！！translate(-50%,-50%)可做绝对定位元素的居中
！！！！！一般都需要transition过渡。inline元素不支持transform,需要先变成block。

缩放scale

scaleX(<number>)
scaleY(<number>)
scaleX(<number>,<number>?)

旋转rotate

rotate([<angle>|<zero>])
rotateZ([<angle>|<zero>])
rotateX([<angle>|<zero>])
rotateY([<angle>|<zero>])
详细可以参考MDN

倾斜skew

skew([<angle>|<zero>],<angle>|<zero>]?)
skewx([<angle>|<zero>])
skewY([<angle>|<zero>])

4.transition 过渡

作用

补充中间帧

语法

transition:属性名时长过渡方式延迟
transition:left 200ms linear

并不是所有属性都能过渡： display:none/block;没法过渡，一般改成visibility:hidden/visible; display和visibility区别：display: none;是彻底消失，不在文档流中占位，浏览器也不会解析该元素；不会被子元素继承。visibility:hidden;是视觉上消失了，在文档流中占位，浏览器会解析该元素；会被子元素继承。

5.animation

如果动画除了起始，还有中间点的话：
第一种使用两次transform
第二种使用animation
@keyframes slidein{ from{ transform:translateX(0%); } to{ transform:translateX(100%); } }

缩写语法

CSS动画