Мерцание анимации

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

Вы можете попробовать это - он не щелкает, но вам нужна ровная граница, чтобы он работал (2 пикселя здесь).

Добавлен класс без флик для элемента.

@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>