header {
  height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #263238;
 }
 
 header a {
  animation: scroll-down-anim 1s infinite;
 }
 
@keyframes scroll-down-anim {
  0% {
    transform: translateY(0);
  }
  100% {
    transform: translateY(10px);
  }
}

<header>
  <a href="#">Animated element</a>
 </header>
 <p>if i remove this,the glitch disappears</p>

任何想法如何解决这一问题？如果我删除< p>元素,它的工作原理.也适用于任何其他浏览器,如Safari.