浏览器渲染原理

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

三种更新方式

1. JS/CSS>style>layout>paint>composite
2. 无layout：JS/CSS>style>paint>composite
3. 无layout,无paint：JS/CSS>style>composite

参考

https://csstriggers.com/

CSS 动画的两种做法

1-transform

• 平移：translate(Single/Double(X->Y) < length-percentage> values)
• translate(-50%,-50%)可做绝对定位元素的居中
• 旋转：rotate(< angle >):参数为正时，顺时针旋转；参数为负时，逆时针旋转
• 缩放：scale(sx/sx,sy):sx 表示缩放向量的横坐标
• 倾斜（扭曲）：skew(ax/ax,ay):ax 用于沿横坐标扭曲元素的角度
• 矩阵变化：matrix(a, b, c, d, tx, ty)
• 搬运自：https://developer.mozilla.org/zh-CN/docs/Web/CSS/transform
• inline元素不支持transform,需要先变成block
• 一般都配合transition过度

1-transtion

/* Apply to 1 property /
/ property name | duration */
transition: margin-right 4s;

/* property name | duration | delay */
transition: margin-right 4s 1s;

/* property name | duration | timing function（） */
transition: margin-right 4s ease-in-out;

/* property name(属性名) | duration（持续时间：时长） | timing function（过渡方式） | delay（延迟时间） */
transition: margin-right 4s ease-in-out 1s;

/* Apply to 2 properties */
transition: margin-right 4s, color 1s;

/* Apply to all changed properties */
transition: all 0.5s ease-out;

/* Global values */
transition: inherit;
transition: initial;
transition: unset;

不是所有的属性都能过渡
过渡必须要有起始

2-animation

/* @keyframes(关键帧) duration（持续时长） | timing-function（过渡方式） | delay |
iteration（循环）-count（次数） | direction | fill-mode（填充模式） | play-state(播放状态：是否暂停) | name */
animation: 3s ease-in 1s 2 reverse(反方向) both paused（指定暂定动画）） slidein;

/* @keyframes duration | timing-function | delay | name */
animation: 3s linear 1s slidein;

/* @keyframes duration | name */
animation: 3s slidein;