Firefox 這個功能不就是前端初學者的福音嗎？
作者：零一
本文分享 Firefox（火狐瀏覽器） 一個有意思的小功能，覺得這個小功能，對于一些初學CSS動畫相關知識的前端同學非常友好。
正文
瀏覽器的Devtools可以幫助我們調試CSS，例如：新增修改刪除某個CSS屬性、查看盒子模型、有顏色選擇器供你修改顏色...
Chrome也很貼心地在你鼠標移動到某個屬性上時，在頁面中同步給你展示效果，比如你為 ??.demo?? 新增了 ??margin: 20px 0?? 的樣式，那你鼠標移動到Chrome Devtools中 ??.demo?? 的 ??margin?? 屬性上時，會在頁面中展示所有應用了該樣式的元素，如下圖：
可能這個功能不足為奇，但 Firefox 這個應該能讓你連連稱贊！
先不廢話，上效果圖：
??transform?? 這個屬性應該說是非常常見了，??translate??、??rorate??、??scale?? 這些都是讓元素進行各種形式2D、3D的變化，而上圖就是演示了當鼠標移動到Devtools中??transform??的值上時，左側會同步展示該元素在應用了 ??transform?? 前后的對應關系，例如變換前這個節點對應變換后的哪個節點、變換前后的位置分別在哪
可能有人要說，這好像也沒啥，我用肉眼也能看出前后變化的對應關系。emmm，嗯，不過重點不是靜態的呀，總歸我們是要應用到一些動畫里的，尤其是特別特別復雜的動畫，可能光憑腦袋想象是無法做到的
所以接下來我們給該元素加上復雜的動畫效果
.demo {
width: 100px;
height: 100px;
background-color: red;
margin: 300px;
/* 超級復雜的變換 */
transform: transform: translate(100px,100px) rotate(45deg) scale(0.5) rotateZ(45deg) skewY(45deg);;
transition: all 4s ease; /* 加上動畫效果 */
}
先不用 Firefox 的功能來看一遍是什么樣的：
不展示運動軌跡
再來看看應用上 Firefox 的功能的效果：
展示運動軌跡
效果應該很明顯了，有運動軌跡時可以讓你看清變換過程中每個節點的運動軌跡，如果還看不清，可以把動畫時間修改成 ??10s??? 甚至 ??20s??
責任編輯：龐桂玉
來源：
前端大全
