最近在開發網站時，遇到了一個困擾了我很長時間的問題，就是使用CSS實現斜切動畫時，頁面經常會卡死。

.skew {
transform: skew(-30deg);
animation: skewAnim 5s infinite;
}
@keyframes skewAnim {
from {
transform: skew(-30deg);
}
to {
transform: skew(30deg);
}
}

我一開始并沒有意識到這個問題，只是覺得頁面偶爾會卡一下，但是后來我發現，當我把斜切動畫的時間設置得更長時，頁面就會完全卡死，無法再進行任何交互。

經過一番調查，我發現這是由于CSS動畫的運行機制決定的。CSS動畫是在主線程上執行的，一旦動畫運行過程中發生阻塞，就會導致整個頁面卡死。

解決這個問題的方法也比較簡單，就是使用requestAnimationFrame（RAF）來代替CSS動畫。

.skew {
transform: skew(-30deg);
}
function skewAnim() {
window.requestAnimationFrame(skewAnim);
var now = new Date().getTime();
var elapsedTime = now - start;
var angle = -30 + (elapsedTime / 1000) * 60;
document.querySelector(".skew").style.transform = "skew(" + angle + "deg)";
}
var start = new Date().getTime();
skewAnim();

使用RAF實現動畫的好處是，動畫的執行完全獨立于主線程，不會受到主線程的阻塞影響，從而保證頁面流暢運行。

總之，如果你也遇到了類似的卡死問題，不妨嘗試使用RAF來代替CSS動畫，相信你也可以輕松解決這個問題。