css3過(guò)渡有2種觸發(fā)方式：1、通過(guò)偽類元素觸發(fā)，包括“:hover”、“:focus”、“:checked”等方式；2、通過(guò)js觸發(fā)，使用js或jquery代碼修改css屬性，進(jìn)而觸發(fā)transition的漸變。
本教程操作環(huán)境：windows7系統(tǒng)、css3&&html5版、dell g3電腦。
transition
transition是css3最簡(jiǎn)單的動(dòng)畫(huà), 當(dāng)元素的屬性發(fā)生改變能夠以漸變的方式呈現(xiàn)出來(lái); 如下代碼是w3c上的一個(gè)示例, 加上了transition的結(jié)果就是在hover時(shí), 長(zhǎng)度會(huì)逐步增加到300px.
<!doctype html><html><head><style> div{width:100px;height:100px;background:blue;transition:width 2s;-moz-transition:width 2s; /* firefox 4 */-webkit-transition:width 2s; /* safari and chrome */-o-transition:width 2s; /* opera */}div:hover{width:300px;}</style></head><body><div></div><p>請(qǐng)把鼠標(biāo)指針移動(dòng)到藍(lán)色的 div 元素上，就可以看到過(guò)渡效果。</p><p><b>注釋：</b>本例在 internet explorer 中無(wú)效。</p></body></html>
css3過(guò)渡的觸發(fā)方式
第一種： 通過(guò)偽類元素觸發(fā)，包括hover、focus、checked等方式
<style> .box{ width: 100px; height: 100px; background-color: blueviolet; transition: width 1s linear .5s; } .box:hover{ width: 400px; }</style><p class=\”box\”></p>
但是實(shí)際使用當(dāng)中我們更多的是使用js或者jquery直接修改屬性, 但是工作中發(fā)現(xiàn)這樣不行。
第二種： 通過(guò)js觸發(fā)
如果使用js或者jquery直接修改css屬性
js觸發(fā)方式應(yīng)當(dāng)是它的class發(fā)生改變以至于能夠得到新的樣式。
我的理解是必須元素發(fā)生什么改變使得它有了一些不同從而獲取到一些新的屬性，對(duì)于偽類觸發(fā)是這樣，對(duì)于js觸發(fā)方式應(yīng)當(dāng)是它的class發(fā)生改變以至于能夠得到新的樣式。
通過(guò)給p添加newclass的類使得p發(fā)生改變獲取到該類， 能夠觸發(fā)transition的漸變。
<style> .box{ width: 100px; height: 100px; background-color: blueviolet; transition: width 1s linear .5s; } .box1{ width: 400px; }</style><p class=\”box\”></p><scrpit> settimeout(() => { let element = document.getelementsbyclassname(\’box\’)[0]; element.classlist.add(\’box1\’) }, 1) </scrpit>
（學(xué)習(xí)視頻分享：css視頻教程）