css - 动画闪烁

Question

我有一个矩形的 div 对象，它正在缓慢地上下移动(无限动画)。该 div 对象具有 1px 宽度的橙色边框(例如)。有什么办法可以防止边框闪烁吗？

我假设这是因为垂直移动(左右边框不闪烁)并且与图像在显示器上的渲染方式有关，但我可以做些什么来防止它吗？我还需要该边框始终可见。

@keyframes float {
        
        0% {
            transform: translateY(0px);
        }
    
        50% {
            transform: translateY(-15px);
        }
    
        100% {
            transform: translateY(0px);
        }
    }

body {
  background-color:#000;
  padding-top:200px;
}

div {
  border: 1px solid orange;
  background-color:#000;
  width:200px;
  height:50px;
  margin:0 auto;
  animation: float 5s infinite;
}

<div></div>

Answer 1

你可以试试这个 - 它不会闪烁，但你需要一个偶数的边框才能工作(这里是 2px)。

向元素添加了一个 no-flick 类。

@keyframes float {
        
        0% {
            transform: translateY(0px);
        }
    
        50% {
            transform: translateY(-15px);
        }
    
        100% {
            transform: translateY(0px);
        }
    }
    

body {
  background-color:#000;
  padding-top:200px;
}

div {
  border: 2px solid orange;
  background-color:#000;
  width:200px;
  height:50px;
  margin:0 auto;
  animation: float 5s infinite;
  
}
.no-flick{-webkit-transform-style: preserve-3d;
-webkit-backface-visibility: hidden;-webkit-transform: translate3d(0, 0, 0);}

<div class="no-flick"></div>