为什么动画css翻译会导致webkit在黑色背景上闪烁？答案

【问题标题】：Why does animating css translate cause flicker in webkit on a black background?为什么动画css翻译会导致webkit在黑色背景上闪烁？
【发布时间】：2014-01-22 11:10:38
【问题描述】：

从jsfiddle 可以看到，这个动画在 webkit 中闪烁。动画是否无限似乎并不重要。如何解决这个问题？我已经尝试了几个小时。所有标准技巧似乎都不适用于此示例。感谢您的宝贵时间。

代码如下：

body {
    background-color: #000;
}

#box {
    width: 200px;
    height: 200px;
    top:20px;
    left:20px;
    position:absolute;
    border: 1px solid red;
    -webkit-animation: box 20s linear infinite normal;
}

@-webkit-keyframes box {
    0% {-webkit-transform: translate(0,100px);}
    50% {-webkit-transform: translate(100px,0);}
    100% {-webkit-transform: translate(0,100px);}
}

编辑：RCorrie 是对的，进入我的显示器的颜色设置并调整它们解决了问题！

【问题讨论】：

什么闪烁？对我来说移动得很好......
如果你的意思是滞后，而不是忘记它，它会使用你的硬件资源，更好的配置，更好的动画，改用 jquery
你在about:flags玩过吗？
我很确定这更多是您的浏览器或屏幕显示如何呈现图像的问题。由于您使用的高对比度颜色，它恰好变得更加突出

标签： css google-chrome css-animations css-transforms

【解决方案1】：

之所以发生这种情况是因为元素是在半像素偏移处渲染的，而不是具有 1 个 100% 不透明度的像素，它将分布在 2 个 50% 不透明度的像素上。它在移动时会在 100% 和 2x50% 之间快速切换，这就是它闪烁的原因。

您可以通过使线条变粗或加快动画速度来修复它（前者更有效地修复它）

【讨论】：

没错。通过减慢动画速度，您可以更好地看到这种行为。你会看到这条线变成了 2px 宽并且变暗了：jsfiddle.net/S9t6q/2