瀏覽器渲染原理

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

參考

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;