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

Question

这个问题在这里已经有了答案:

在循环中用CSS在图像之间交叉渐变 (1个答案)

是否可以连续对DIVs进行动画制作？ (1个回答)

封闭 24天前.

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

我有5个div的css持续滑块，工作正常。然而，我需要删除两个divs，所以只有三个。

.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>

链接到我正在进行的codepen。

所以我试着把动画改为9秒，每个div3秒，我把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%);
  }
}

这是一个片段

.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%）。

如果要在将来添加或删除幻灯片，你可以简单地重新计算该数量的幻灯片的百分比。因此，如果你为总共4张幻灯片增加了1张幻灯片，你可以用25%而不是33.33%来工作。