CSS 动画关键帧百分比问题

Question

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

我有 css 5 div 的连续滑块，效果很好。但是我需要删除两个 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 秒。我已将 divs 的延迟分别更改为 -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>

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

当然，您可以将百分比更改为 increase/decrease 动画的暂停和速度...请记住确保显示幻灯片的关键帧与隐藏的关键帧具有相同的持续时间它（在上面的例子中是 8%）。

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

CSS 动画关键帧百分比问题

CSS animation keyframe percentage issue

css

keyframe

css-animations