javascript - CSS动画残留像素片段

我注意到在大小和框阴影从屏幕的一侧到另一侧的简单CSS动画处理之后，残留的像素碎片仍然留下了。

这是 Code Pen ，因此您可以在运行中看到它，并且在Chrome 66中看起来像这样:



反正有什么要删除这些剩余的碎片？

这是代码:

* {

  margin: 0;
  padding: 0;
  box-sizing: content-box;
}

#container {

  display: flex;
  align-items: center;
  height: 100vh;
}

#box {

  position: relative;
  width: 150px;
  height: 150px;
  animation: move 2s infinite alternate ease-in-out;
}

@keyframes move {

  0% {

    left:  0;
    background-color: blue;
    border-radius: 0;
  }

  100% {

    left: calc(100vw - 270px);
    background-color: red;
    border-radius: 50%;
    box-shadow:
      0 0 0 20px black,
      0 0 0 40px cyan,
      0 0 0 60px yellow,
      0 0 0 80px pink,
      0 0 0 100px gray,
      0 0 0 120px blue;
  }
}

<div id="container">
  <div id="box">
  </div>
</div>

最佳答案

似乎渲染错误在overflow: hidden;元素上使用#box时消失了:

* {
  margin: 0;
  padding: 0;
  box-sizing: content-box;
}

#container {
  display: flex;
  align-items: center;
  height: 100vh;
}

#box {
  overflow: hidden;
  position: relative;
  width: 150px;
  height: 150px;
  animation: move 2s infinite alternate ease-in-out;
}

@keyframes move {
  0% {
    left: 0;
    background-color: blue;
    border-radius: 0;
  }
  100% {
    left: calc(100vw - 250px);
    background-color: red;
    border-radius: 50%;
    box-shadow: 0 0 0 20px black, 0 0 0 40px cyan, 0 0 0 60px yellow, 0 0 0 80px pink, 0 0 0 100px gray, 0 0 0 120px blue;
  }
}

<div id="container">
  <div id="box">
  </div>
</div>