边缘上的CSS动画变换错误

Question

我有一个奇怪的bug/lag，在边缘上有一些动画，它看起来是在我添加位置之后出现的:固定在正在动画的div上，它在每个浏览器上都工作得很好，但是边缘(不确定safari tho)。

​

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

向.animation-box-2添加position:fixed; z-index:-1;