這個(gè)功能算是前端的福音了

今天分享 Firefox（火狐瀏覽器） 一個(gè)有意思的小功能，我也是無(wú)意間看到的，看到的時(shí)候覺(jué)得這個(gè)小功能對(duì)于一些初學(xué)CSS動(dòng)畫(huà)相關(guān)知識(shí)的前端同學(xué)非常友好

正文

瀏覽器的Devtools可以幫助我們調(diào)試CSS，例如：新增修改刪除某個(gè)CSS屬性、查看盒子模型、有顏色選擇器供你修改顏色...

Chrome也很貼心地在你鼠標(biāo)移動(dòng)到某個(gè)屬性上時(shí)，在頁(yè)面中同步給你展示效果，比如你為 .demo 新增了 margin: 20px 0 的樣式，那你鼠標(biāo)移動(dòng)到Chrome Devtools中 .demo 的 margin 屬性上時(shí)，會(huì)在頁(yè)面中展示所有應(yīng)用了該樣式的元素，如下圖：

可能這個(gè)功能不足為奇，但 Firefox 這個(gè)應(yīng)該能讓你連連稱贊！

先不廢話，上效果圖：

transform 這個(gè)屬性應(yīng)該說(shuō)是非常常見(jiàn)了，translate、rorate、scale 這些都是讓元素進(jìn)行各種形式2D、3D的變化，而上圖就是演示了當(dāng)鼠標(biāo)移動(dòng)到Devtools中transform的值上時(shí)，左側(cè)會(huì)同步展示該元素在應(yīng)用了 transform 前后的對(duì)應(yīng)關(guān)系，例如變換前這個(gè)節(jié)點(diǎn)對(duì)應(yīng)變換后的哪個(gè)節(jié)點(diǎn)、變換前后的位置分別在哪

可能有人要說(shuō)，這好像也沒(méi)啥，我用肉眼也能看出前后變化的對(duì)應(yīng)關(guān)系。emmm，嗯，不過(guò)重點(diǎn)不是靜態(tài)的呀，總歸我們是要應(yīng)用到一些動(dòng)畫(huà)里的，尤其是特別特別復(fù)雜的動(dòng)畫(huà)，可能光憑腦袋想象是無(wú)法做到的

所以接下來(lái)我們給該元素加上復(fù)雜的動(dòng)畫(huà)效果

.demo?{
??width:?100px;
??height:?100px;
??background-color:?red;
??margin:?300px;
??/*?超級(jí)復(fù)雜的變換?*/
??transform:?transform:?translate(100px,100px)?rotate(45deg)?scale(0.5)?rotateZ(45deg)?skewY(45deg);;
??transition:?all?4s?ease;?/*?加上動(dòng)畫(huà)效果?*/
}

先不用 Firefox 的功能來(lái)看一遍是什么樣的：

再來(lái)看看應(yīng)用上 Firefox 的功能的效果：

效果應(yīng)該很明顯了，有運(yùn)動(dòng)軌跡時(shí)可以讓你看清變換過(guò)程中每個(gè)節(jié)點(diǎn)的運(yùn)動(dòng)軌跡，如果還看不清，可以把動(dòng)畫(huà)時(shí)間修改成 10s 甚至 20s