动画闪烁

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）。

向该元素添加了一个轻拂类。

public Page<CompanyHeader> getCompanies(CompanyFilter companyFilter, Locale locale) {
    Page<Company> companies = getCompanies(companyFilter);
    Page<CompanyHeader> headers = companies.map(company -> companyMapper.entityToHeader(company, locale));

    return headers;
}

@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);}