html - 幻灯片无法正常工作

Question

我在较早的代码中使用了相同的@keyframes，但效果很好，不知道为什么这里不能正常工作，幻灯片无法平稳移动，并且展示柜的第四个子卡在左侧，并且是唯一一个正在覆盖width: 100%：

body {margin: 0}

.top-container {
  display: grid;
  grid-template-areas:
  'showcase showcase'
  'showcase showcase';
}

.showcase {
  grid-area: showcase;
  min-height: 600px;
  width: 100%;
  padding: 3rem;
  display: flex;
  flex-direction: column;
  align-items: start;
  justify-content: center;
  box-shadow: var(--shadow);
  animation: slide 8s infinite;
}

.showcase h1 {
  font-size: 4rem;
  margin-bottom: 0;
  color: var(--light);
}

.showcase:nth-child(1) {
  animation-delay: -1s;
  background-color: #333;
  background-size: cover;
  background-position: center;
}

.showcase:nth-child(2) {
  animation-delay: 2s;
  background-color: black;
  background-size: cover;
  background-position: center;
}

.showcase:nth-child(3) {
  animation-delay: 5s;
  background-color: bisque;
  background-size: cover;
  background-position: center;
}

.showcase:nth-child(4) {
  animation-delay: 8s;
  background-color: yellowgreen;
  background-size: cover;
  background-position: center;
}

@keyframes slide {
  0% {left: 100%; width: 100%}
  5% {left: 0%}
  25% {left: 0%}
  30% {left: -100%; width: 100%}
  30.01% {left: -100%; width: 0%}
  100% {left: 100%; width: 0%}
}

<section class="top-container">
  <div class="showcase">1</div>
  <div class="showcase">2</div>
  <div class="showcase">3</div>
  <div class="showcase">4</div>
</section>

Answer 1

出现问题的主要原因是，尽管没有在left类中设置position: absolute;，但您仍在使用.showcase属性。
修复后，应注意z-index中的@keyframes slide属性