Question

从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是对的，进入我的显示器的颜色设置并调整它们解决了问题！

Answer 1

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

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

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

1 个答案: