1. 瀏覽器渲染原理
瀏覽器渲染的過(guò)程主要包括以下五步：
① 瀏覽器將獲取的HTML文檔解析成DOM樹(shù)
②?處理CSS標(biāo)記，構(gòu)成層疊樣式表模型CSSOM(CSS Object Model)
③?將DOM和CSSOM合并為渲染樹(shù)(rendering tree)將會(huì)被創(chuàng)建，代表一系列將被渲染的對(duì)象
④?渲染樹(shù)的每個(gè)元素包含的內(nèi)容都是計(jì)算過(guò)的，它被稱之為布局layout。瀏覽器使用一種流式處理的方法，只需要一次pass繪制操作就可以布局所有的元素
?、?將渲染樹(shù)的各個(gè)節(jié)點(diǎn)繪制到屏幕上，這一步被稱為繪制painting
2. transition動(dòng)畫做法
作用：補(bǔ)充中間幀數(shù)
transition-property:指定過(guò)度的元素; 如：transition-property:height,就是指在動(dòng)畫過(guò)程中height元素參與變化
transition-duration：指定這個(gè)過(guò)度持續(xù)時(shí)間;
transition-delay:延遲過(guò)度時(shí)間;
transition-timing-function:指定時(shí)間過(guò)度類型; 如：ease\linear\ease-in\ease-out\ease-in-out\
其中：ease是越來(lái)越慢，linear是勻速運(yùn)動(dòng)，ease-in是先慢后快，ease-out是先快后慢，ease-in-out是先慢后快再慢，transition：all指全部屬性參與
display和visibility區(qū)別：
display:block 和 visibility: visible 都有讓元素顯示的意思，那么兩者的區(qū)別在與：
display:none（消失）是在不再占用空間
visibility:hidden （隱藏）使元素在網(wǎng)頁(yè)上隱藏，但仍占用空間
3. animation動(dòng)畫做法
作用：聲明關(guān)鍵幀；添加動(dòng)畫
@keyframes 定義關(guān)鍵幀動(dòng)畫
animation-name 動(dòng)畫名稱
animation-duration 動(dòng)畫時(shí)間
animation-timing-function 動(dòng)畫曲線linear（勻速）| ease（緩沖）| step（步數(shù)）
animation-delay 動(dòng)畫延遲
animation-play-state 動(dòng)畫狀態(tài) paused（停止）| running（運(yùn)動(dòng)）
animation：name duration timing-function delay iteration-count direction；同時(shí)設(shè)置多個(gè)屬性
方向（animation-direction）
normal 默認(rèn)正常
reverse 相反方向
alternate 默認(rèn)正常方向循環(huán)（需要配合次數(shù)）
alternate-reverse 默認(rèn)相反方向循環(huán)（需要配合次數(shù)）
填充模式（animation-fill-mode）
none 默認(rèn)
forwards 最后靜止不動(dòng)（保持最后一幀）
backwards （需配合延遲屬性）立即應(yīng)用第一個(gè)關(guān)鍵幀的樣式，延遲結(jié)束后，執(zhí)行動(dòng)畫
是否暫停（animation-play-state）
running 恢復(fù)運(yùn)行動(dòng)畫
paused 暫停動(dòng)畫
