javascript - 边缘的 CSS 动画转换错误

Question

我有一个奇怪的错误/滞后，边缘上有一些动画，看起来滞后是在我添加位置后出现的:固定到正在动画的 div，它在每个浏览器上工作正常但边缘(不当然还有 Safari 浏览器)。

document.addEventListener('DOMContentLoaded', _ => {
  const animBoxOne = document.querySelector('.animation-box-1')
  const animBoxTwo = document.querySelector('.animation-box-2')
  
  animBoxOne.classList.add('animation-1')
  setTimeout(() => {
    animBoxOne.classList.add('hidden')
    
  }, 6000);

})

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  overflow-x: hidden;
}

.logo-box {
  display: flex !important; 
  align-items: center;
  justify-content: center;
}

.logo {
  width: 50%;
}

.animation-box-1 {
  max-height: 100vw;
  width: 900%;
  position: fixed;
}

.animation-1 {
  animation-name: introAnimation;
  animation-duration: 6s;
  animation-fill-mode: forwards;
  transition: opacity 2s;
}

.animation-box-2 {
  max-height: 100vw;
  width: 900%;

}

.square {
  width: 100vw;
  height: 100vh;
  display: block;
  float: left;
}

.square-1 {
  background: black;
}

.square-2 {
  background: #9F7324;
}

.square-3 {
  background: white;
}

.square-4 {
  background: black;
}

.hidden {
  opacity: 0;
}

@keyframes introAnimation {
  40% {
    transform: translateX(0)
  }

  55% {
    transform: translateX(-100vw)
  }

  70% {
    transform: translateX(-200vw)
  }

  85% {
    transform: translateX(-300vw);
  }

  100% {
    transform: translateX(-300vw);
  }
}

.clearfix ::after {
  content: '';
  clear: both;
}

<div class="animation-box-1 clearfix">
    <div class="square square-1 logo-box">
<!--       <img class="logo" src="logo.svg" alt=""> -->
    </div>
    <div class="square square-2"></div>
    <div class="square square-3"></div>
    <div class="square square-4"></div>
  </div>
  
  <div class="animation-box-2">
    <div class="square square-1 logo-box">
    </div>
  </div>

这是代码笔链接:https://codepen.io/matheusferraresi/pen/BVWvWg

.animation-box-1 {
max-height: 100vw;
width: 900%;
position: fixed;
}

这就是我所说的障碍，有人知道我该如何解决它吗？我需要固定位置，因为我正在像预加载器一样使用此动画，或者是否有任何其他方法可以做到这一点？

提前致谢。

Answer 1

添加位置:固定； z-index:-1; 到 .animation-box-2