最近發(fā)現(xiàn)一個(gè)有趣的現(xiàn)象，就是在一些網(wǎng)站上瀏覽頁面的時(shí)候會(huì)出現(xiàn)屏幕抖動(dòng)的情況。通過研究發(fā)現(xiàn)，這種抖動(dòng)是由CSS動(dòng)畫導(dǎo)致的。

具體來說，這種抖動(dòng)通常與一些屬性的使用有關(guān)。其中一個(gè)常見的屬性是transform:translateZ(0)。這個(gè)屬性可以開啟硬件加速，提高動(dòng)畫的性能。但是，如果在使用這個(gè)屬性的時(shí)候沒有結(jié)合其他屬性或者使用不當(dāng)，就容易產(chǎn)生屏幕抖動(dòng)的情況。

.box {
transform: translateZ(0);
animation: move .5s infinite alternate;
}
@keyframes move {
from {
transform: translateX(0);
}
to {
transform: translateX(50px);
}
}

上面的代碼中，我們?yōu)橐粋€(gè)元素添加了transform: translateZ(0)和一個(gè)簡單的動(dòng)畫效果，讓元素來回移動(dòng)。當(dāng)我們在瀏覽器中查看這個(gè)頁面時(shí)，就會(huì)發(fā)現(xiàn)屏幕抖動(dòng)。

如何解決這個(gè)問題呢？其實(shí)也很簡單，可以通過添加backface-visibility:hidden或者perspective: 1000px來解決。其中，backface-visibility:hidden可以讓元素的背面不可見，從而避免抖動(dòng)；而perspective: 1000px可以為元素添加透視效果，也可以避免抖動(dòng)。

.box {
transform: translateZ(0);
backface-visibility: hidden; /* 或者 perspective: 1000px; */
animation: move .5s infinite alternate;
}
@keyframes move {
from {
transform: translateX(0);
}
to {
transform: translateX(50px);
}
}

在使用CSS動(dòng)畫時(shí)，一定要注意屏幕抖動(dòng)的問題，避免影響用戶體驗(yàn)。