瀏覽器渲染過程
- 根據(jù)HTML構(gòu)建HTML樹（DOM）
- 根據(jù)CSS構(gòu)建CSS樹（CSSOM）
- 將兩棵樹合并成一棵樹（render tree）
- Layout布局（文檔流、盒模型、計算大小和位置）
- Paint繪制（把邊框顏色、文字顏色、陰影等畫出來）
- compose合成（根據(jù)層疊關(guān)系展示畫面）
CSS 進階之動畫
我們都知道動畫電影由一幀一幀的靜態(tài)畫面拼接而成，一秒動畫有24幀畫面，如果低于24幀，人眼即可感知畫面切換，就會有卡頓的感覺。
CSS 中，如果按一秒24幀的畫法來寫代碼，未免太過繁瑣。所以我們把動畫拆解為動作(transition)，一個動作表示從一個狀態(tài)到另一個狀態(tài)的變化，然后把一組動作串起來，即是 CSS 中的動畫(animation)
CSS 動畫的兩種做法（transition 和 animation）
1.transition
- 作用：補充中間幀
- 語法
transititon:屬性名 時長 過渡方式 延遲
如：
transition: left 200ms linear
可以用逗號分隔不同的屬性
transition:left 200ms,top 300ms
可以用all來代表所有的屬性，但并不是所有的屬性都能過渡
display:none = >block無法過渡
一般改成visibility:hidden=>visible
過渡方式有：
linear|ease|ease-in|ease-out|ease-in-out等等
2.animation
- 聲明關(guān)鍵幀
- 添加動畫
如何讓動畫停在最后一幀
- 搜索CSS animation stop at end
- 加個forwards
@keyframes 寫法
1.搜索MDN keyframes
2.一種是from to
@keyframes xxx{
from{
transform:translate(0%)
}
to{
transform:translate(100%)
}
}
3.一種是按百分比來寫
@keyframes xxx{
0%{top:0; left:0}
30%{top:50px;}
68%,72%{left:50px;}
100%{top:100px; left:100%}
}
縮寫語法
animation:時長|過渡方式|延遲|方向|填充模式|是否暫停|動畫名
1.時長：1s或者1000ms
2.過渡方式：跟transition取值一樣，如linear
3.次數(shù)：3或者infinite
4.方向：reverse|alternate|alternate-reverse
5.填充方式：none|forwards|both|backwards
6.是否暫停：pause|running
以上屬性都有對應(yīng)的單獨屬性
transform四個常用功能
- 位移 translate
- 縮放 scale
- 旋轉(zhuǎn) rotate
- 傾斜 skew
主要用法請參考MDN transform MDN
