CSS动画在transform:translate3d上随宽度闪烁

我有一个基于选项卡的组件，其中活动选项卡有一个下划线，可以在选项卡之间设置动画。下划线是一个单独的div，其宽度和位置将动态计算。我用translate3d代替绝对位置

.active-bar {
    transition: all 0.3s linear;
    -webkit-transform-style: preserve-3d;
    -webkit-backface-visibility: hidden;
    -webkit-perspective: 1000;
}

此栏动态计算以下动画

transform: translate3d(463.484px, 0px, 0px);
width: 32px;

transform: translate3d(463.484px, 0px, 0px);
width: 32px;

到

---

但我有时会看到闪烁，但并不总是如此。我需要使用什么解决方案来避免闪烁

为了使过渡更平滑（并且更少依赖于CPU），只需使用变换和固定宽度。更改此动态样式：

到

动态部分（宽度为32px）

---

这些问题通常与计算机有关，比如图形卡（或处理器）忙得不可开交。。。你试过另一台设备吗，可能马力更大？我只是看到它是一个下划线动画，而不是文本，所以比例会非常好：）…+1Btw，因为只沿x轴移动，你有没有测试过none 3d

translate

是否性能更好？@LGSon通常，3d变换会使用GPU，通常2D变换需要CPU，所以3D可能更好。但无论如何，最好是测试具体案例。

transform: translate3d(463.484px, 0px, 0px);
width: 32px;

width: 100px;   /* fixed in the element */

transform: translate3d(463.484px, 0px, 0px) scaleX(0.32);