CSS 动画在变换时闪烁：translate3d 和宽度答案

【问题标题】：CSS animation flickers on transform: translate3d along with widthCSS 动画在变换时闪烁：translate3d 和宽度
【发布时间】：2017-03-23 16:31:30
【问题描述】：

我有一个基于选项卡的组件，其中活动选项卡有一个在选项卡之间动画的下划线。下划线是一个单独的 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(20px, 0px, 0px);
width: 254px;

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

【问题讨论】：

那些并非总是问题通常与计算机相关，例如显卡（或处理器）很忙并且出现故障...您是否尝试过其他设备，也许有更多的马力？

标签： css css-transitions css-animations css-transforms

【解决方案1】：

为了使过渡更平滑（并减少对 CPU 的依赖），请仅使用变换和固定宽度。改变这种动态风格：

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

到

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

和动态部分（宽度为 32px）

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

【讨论】：

我刚刚看到它是一个 下划线 动画，而不是文本，所以比例会非常好:) ...+1
顺便说一句，由于只沿 x 轴移动，你有没有测试过 none 3d translate 是否表现更好？
@LGSon 通常，3D 变换会使用 GPU，而 2D 变换通常会使用 CPU，所以可能 3D 更好。但无论如何，最好还是测试一下具体情况。