瀏覽器對(duì)內(nèi)容的渲染拇泣，這一部分（渲染樹構(gòu)建奖磁、布局及繪制），又可以分為下面5個(gè)步驟：
- 處理 HTML 標(biāo)記并構(gòu)建 DOM 樹阳液。
- 處理 CSS 標(biāo)記并構(gòu)建 CSSOM 樹怕敬。
- 將 DOM 與 CSSOM 合并成一個(gè)渲染樹。
- 根據(jù)渲染樹來布局帘皿，以計(jì)算每個(gè)節(jié)點(diǎn)的幾何信息东跪。
- 將各個(gè)節(jié)點(diǎn)繪制到屏幕上。
transition的用法：
- transition就是過渡的意思鹰溜，就是 告訴你開頭是什么樣的虽填，中間是什么樣的，結(jié)束的時(shí)候是什么樣的.
- 作用：補(bǔ)充中間幀曹动，給你開始結(jié)尾補(bǔ)充中間的畫面變化是怎么樣的斋日。
- 語法：
transition：屬性名 時(shí)長(zhǎng) 過渡方式 延遲
transition:width 1s linear 3s
也可以用逗號(hào)來隔開兩個(gè)不同的屬性：可以用all代表所有屬性
transition: all 2s
過渡方式有：linear | ease（非線性） | rase-in | raes-out | ease-in-out |
注意：
并不是所有屬性都能過渡
display:none=>block無法過度，一般改成xisibilit：hidden=>visible
opaciti:0;（透明度）讓動(dòng)畫看不見墓陈，但位置還占著恶守，容易bug.要等動(dòng)畫結(jié)束的時(shí)候關(guān)掉。
background是可以過度的
animation
#demo.start{
animation: xxx 1.5s
}
@keyframes xxx{
0%{transform:translate x(200px);}
66.66%{transform:translate x(200px);tranform:translate(100px);}
}
如何讓動(dòng)畫停在最后一幀跛蛋？直接在后面加一個(gè)forwards
animation： xxx 1.5s forwards;
@animation還有另一種用法：
#demo.start{
animation: xxx 1.5s forwards
}
@keyframes: xxx {
from {transform:translate(200px);}
to {transformLtranslate(100px);}
}
xxx是一個(gè)名字熬的，當(dāng)聲明@keyframes xxx時(shí)，需要把XXX放在animation里面
