CSS动画关键帧百分比问题[重复]

Question

我之前发过关于 CSS 关键帧动画的帖子，并尝试了一种使用延迟的不同方式。

我有 5 个 div 的 css 连续滑块，效果很好。但是我需要删除两个 div，所以只有三个。

.wrapper{
    position: relative;
    height: 330px;
    display: grid;
    overflow: hidden;
    width:600px;
    background:#f1f1f1;
}

.slide {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
  animation: slider 9s cubic-bezier(0.5, 1, 0.5, 1) infinite;
  color:#fff;
  font-size:30px;
  text-align:center;
  padding-top:25%;
}

.slide:first-of-type {
  animation-delay: -9s;
  background:red;
}
.slide:nth-of-type(2) {
  animation-delay: -6s;
  background:blue;
}
.slide:last-of-type {
  animation-delay: -3s;
  background:black;
}

@keyframes slider {
  0% {
    transform: translateX(0);
    opacity: 1;
  } 
  16% {
    transform: translateX(0);
    opacity: 1;
  } 
  20% {
    transform: translateX(100%);
    opacity: 1;
  } 
  75% {
    transform: translateX(100%);
    opacity: 0;
  } 
  76% {
    transform: translateX(-100%);
    opacity: 0;
  } 
  96% {
    transform: translateX(-100%);
    opacity: 1;
  } 
}

<div class="wrapper">
  <div class="slide">
    1
  </div>
    <div class="slide">
    2
  </div>
    <div class="slide">
    3
  </div>
</div>

Link to my on going codepen.

所以我尝试将动画更改为 9 秒，每个 div 3 秒。 我已将 div 的延迟分别更改为 -9s、-6s、-3s，但在每个 div 滑入之间都有一个暂停。

我试图改变我认为我出错的百分比。

我想知道是否有人可以就我需要更改的百分比给我一些帮助，或者是否有一个公式可以使用，以便我将来可以根据需要切换 div 的数量？

Answer 1

关键帧百分比与您的动画持续时间有关。例如：对于 10 秒的动画，10% 是 1 秒标记，50% 是 5 秒标记，100% 是 10 秒标记。

如果您的整个动画长度为 9 秒，并且您有 3 张幻灯片都以 3 秒的偏移量开始，那么您需要确保您的幻灯片在前 33.33%（3 秒）内完成它们的工作关键帧动画并在剩余的 66.66%（6 秒）内保持隐藏。

现在，在您的情况下，幻灯片过渡不是即时的，因此您必须稍微超过 33.33% 才能确保您的动画很好地重叠而没有间隙。您看到的延迟就是这些差距。

因此，考虑到这一点，您可以像这样简化它们：

@keyframes slider {
  /* Start left off screen */
  0% {
    transform: translateX(-100%);
  }
  /* Move to visible position within 8% of 9 seconds (less than a second). */
  8% {
    transform: translateX(0);
  } 
  /* Stay until at least 3 second mark (33% of 9s). */
  33.33% {
    transform: translateX(0);
  } 
  /* Move offscreen to the right while
     the next slide is moving in.
     Same duration as slide-in (8%), but starting at 33.33%,
     so 33.33% + 8% = 41.33%.
  */
  41.33% {
    transform: translateX(100%);
  } 
  /* Stay there until the end. */
  100% {
    transform: translateX(100%);
  }
}

这里是一个sn-p：

.wrapper{
    position: relative;
    height: 330px;
    display: block;
    overflow: hidden;
    width:600px;
    background:#f1f1f1;
}

.slide {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
  animation: slider 9s cubic-bezier(0.5, 1, 0.5, 1) infinite;
  color:#fff;
  font-size:30px;
  text-align:center;
  padding-top:25%;
}

.slide:first-of-type {
  animation-delay: -9s;
  background:red;
}
.slide:nth-of-type(2) {
  animation-delay: -6s;
  background:blue;
}
.slide:last-of-type {
  animation-delay: -3s;
  background:black;
}

.wrapper{
position: relative;
height: 330px;
display: block;
overflow: hidden;
width:600px;
background:#f1f1f1;
}

.slide {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
  animation: slider 9s cubic-bezier(0.5, 1, 0.5, 1) infinite;
  color:#fff;
  font-size:30px;
  text-align:center;
  padding-top:25%;
}

.slide:first-of-type {
  animation-delay: -9s;
  background:red;
}
.slide:nth-of-type(2) {
  animation-delay: -6s;
  background:blue;
}
.slide:last-of-type {
  animation-delay: -3s;
  background:black;
}

@keyframes slider {
  /* Start left off screen */
  0% {
    transform: translateX(-100%);
  }
  /* Move to visible position within 8% of 9 seconds (less than a second). */
  8% {
    transform: translateX(0);
  } 
  /* Stay until at least 3 second mark (33% of 9s). */
  33.33% {
    transform: translateX(0);
  } 
  /* Move offscreen to the right while
     the next slide is moving in.
     Same duration as slide-in (8%), but starting at 33.33%,
     so 33.33% + 8% = 41.33%.
  */
  41.33% {
    transform: translateX(100%);
  } 
  /* Stay there until the end. */
  100% {
    transform: translateX(100%);
  }
}

<div class="wrapper">
  <div class="slide">
    1
  </div>
    <div class="slide">
    2
  </div>
    <div class="slide">
    3
  </div>
</div>

我认为您不需要更改不透明度，所以我删除了它们。

当然，您可以更改百分比以增加/减少动画的暂停和速度...只需记住确保显示幻灯片的关键帧与隐藏它的关键帧具有相同的持续时间（在8% 以上的例子）。

要在以后添加或删除幻灯片，您只需重新计算该幻灯片数量的百分比即可。因此，如果您将 1 张幻灯片添加到总共 4 张幻灯片中，您可以使用 25% 而不是 33.33%。