时间戳

首页 > 解决方案 > CSS动画关键帧百分比问题

css - CSS动画关键帧百分比问题

问题描述

我之前发布过关于 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>

链接到我正在进行的 codepen。

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

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

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

标签： csscss-animationskeyframe

解决方案

关键帧百分比与您的动画持续时间有关。例如：对于 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 %）。

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

推荐阅读