Firefox浏览器中CSS skewY动画出现故障问题求助

Hey，我之前也碰到过类似的跨浏览器动画坑，来帮你捋清楚：

问题根源 #

Firefox和WebKit内核浏览器（Chrome/Safari）在处理同时动画布局属性与合成属性时的渲染逻辑有差异。你的代码里同时动了bottom（这是会触发页面重排的布局属性）和transform: skewY()（合成层属性，仅触发GPU合成），Firefox在协调这两类动画的执行时机时容易出现不同步，最终导致skew变换出现视觉故障。加前缀没用是因为这根本不是兼容性前缀的问题，是浏览器渲染机制的差异导致的。

修复方案 #

把所有动画相关的位移都迁移到transform里，因为transform是浏览器优先优化的合成层属性，不会触发重排，能让所有浏览器的动画表现更一致。用translateY()替代bottom来实现垂直位移，这样整个动画只操作transform一个属性：

修改后的CSS代码：

body.loading-end #test::after {
  animation: skewAction 3s ease;
  /* 初始化transform，避免动画启动时的突兀跳动 */
  transform: translateY(0) skewY(0deg);
}

@keyframes skewAction {
  0% {
    transform: translateY(-100px) skewY(0deg);
  }
  50% {
    transform: translateY(-100px) skewY(4deg);
  }
  100% {
    transform: translateY(-200px) skewY(0deg);
  }
}

为什么这样改有效？ #

• bottom的修改会触发浏览器重排（重新计算元素位置、页面布局），而transform的变换是在GPU合成层完成的，性能更高，也不会和布局计算产生冲突。
• 让动画仅依赖transform单一属性，消除了Firefox在协调布局/合成动画时的不同步问题，同时Chrome/Safari的原有表现也不会受到影响。

现在再去Firefox里测试，应该就能看到和Chrome/Safari完全一致的平滑skew动画了~

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