javascript - CSS 动画残留像素碎片

Question

我注意到从屏幕的一侧到另一侧的大小和框阴影的简单 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>

Answer 1

似乎是在 #box 元素上使用 overflow: hidden; 时消失的呈现错误:

* {
  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>