CSS立方体动画在Firefox中异常：移出viewport后冻结，求解决方案

这个问题我之前也碰到过！大概率是Firefox的后台动画节流机制在搞鬼——为了节省CPU和GPU资源，Firefox会自动暂停不在视口内（或者页面处于后台标签）的CSS动画/过渡。而你移动鼠标时，触发了页面的重绘操作，浏览器就临时恢复了动画运行。

下面给你几个实用的解决方案，按改动从小到大排序：

1. 用will-change提示浏览器保留动画资源 #

给你的立方体容器加上will-change: transform;属性，这个属性相当于提前跟浏览器打个招呼：“这个元素的transform属性要持续动，别随便暂停它”，浏览器就会为它分配持续的动画资源，避免被节流：

/* 替换成你的立方体容器类名 */
.cube-wrapper {
  will-change: transform;
  /* 你的其他容器样式 */
}

⚠️ 小提醒：别给太多元素加这个属性，它会占用额外的GPU资源，只给确实需要持续动画的元素用就好。

2. 强制开启硬件加速绕开节流 #

给立方体元素添加transform: translateZ(0);（或者translate3d(0,0,0)），把元素放到GPU层渲染，Firefox对GPU层的动画节流规则会宽松很多，基本不会因为移出视口就冻结：

.cube {
  /* 保留你原有的3D变换，加上这行 */
  transform: translateZ(0) rotateX(0deg) rotateY(0deg);
  /* 你的其他立方体样式 */
}

这个方法是老派但有效的硬件加速技巧，适合快速解决这类兼容性问题。

3. 用JavaScript的requestAnimationFrame驱动动画（兜底方案） #

如果上面两个CSS方案都没效果，就换用JS来控制动画。浏览器对requestAnimationFrame的节流逻辑和CSS动画不同，只要页面在前台，即使元素不在视口，动画通常也会持续运行：

// 获取立方体元素和面4元素
const cube = document.querySelector('.cube');
const face4 = document.querySelector('.face4');

let rotateX = 0;
let rotateY = 0;

function animate() {
  // 调整旋转角度，和你的CSS动画节奏保持一致
  rotateX += 1;
  rotateY += 1;
  cube.style.transform = `rotateX(${rotateX}deg) rotateY(${rotateY}deg)`;
  requestAnimationFrame(animate);
}

// 点击面4启动动画
face4.addEventListener('click', () => {
  animate();
});

这个方案需要把你原有的CSS动画逻辑转成JS，但能彻底摆脱浏览器的CSS动画节流限制。

你可以先试前两个CSS方案，改动最小，一般就能解决问题。如果还是不行，再试JS的兜底方案~

内容的提问来源于stack exchange，提问作者Piton Tony