CSS 图像滑块中的计时

Question

我在 CSS 关键帧动画中遇到时间问题。

我有 90%，但在外观上每个图像之间存在差距。

我知道这是一个时间问题，但我无法在不破坏当前功能的情况下让差距消失。

到目前为止的代码：

.slider {
  position: relative;
  height: 200px;
  width: 300px;
  background: gray;
  overflow:hidden;
}
.slide,
.slide img {
  position: absolute;
  top: 0;
  left: 0%;
  height: 100%;
  width: 100%;
}
.slide h1 {
  position: absolute;
  top: 20%;
  right: 0;
  height: 10%;
  color: white;
}
.slide p {
  position: absolute;
  top: 40%;
  left: 0;
  height: 60%;
  color: white;
}
.slide {
  transform: translateX(100%);
  -webkit-animation: slide 20s forwards infinite;
}
.slide:nth-child(2) {
  -webkit-animation-delay: 5s;
}
.slide:nth-child(3) {
  -webkit-animation-delay: 10s;
}
.slide:nth-child(4) {
  -webkit-animation-delay: 15s;
}
@-webkit-keyframes slide {
  0% {
    transform: translateX(100%);
  }
  5% {
    transform: translateX(0);
  }
  20% {
    transform: translateX(0);
  }
  25% {
    transform: translateX(-100%);
  }
  100% {
    transform: translateX(-100%);
  }
}

<div class="slider">
  <div class="slide">
    <img src="http://lorempixel.com/300/200" />
    <h1>Slide 1</h1>

    <p>Text to do with slide 1</p>
  </div>
  <div class="slide">
    <img src="http://lorempixel.com/600/400" />
    <h1>Slide 2</h1>

    <p>Text to do with slide 2</p>
  </div>
  <div class="slide">
    <img src="http://lorempixel.com/1200/800" />
    <h1>Slide 3</h1>

    <p>Text to do with slide 3</p>
  </div>
  <div class="slide">
    <img src="http://lorempixel.com/1800/1200" />
    <h1>Slide 4</h1>

    <p>Text to do with slide 4</p>
  </div>
</div>

在我的 sn-p 中，您可以看到一个短暂的延迟，它允许灰色背景出现在下一张图像之前。

我的设计将只满足 4 张图片，每张应该在屏幕上显示大约 5 秒。我很高兴为此使用 CSS 关键帧（不是 jquery 或外部插件）。

请注意，我已删除前缀，因此目前支持 webkit 前缀。

有人可以解释一下我应该如何计时吗？我很确定这是 0% -> 5% 的过渡，但我不能确定？

这里的任何帮助都会很棒。

Answer 1

修复方法是让每个图像在屏幕上停留（固定状态或滑入/滑出状态）动画持续时间的 1/4。考虑到前 5% 滑入，后 5% 滑出，我们必须将滑出设置在 25% 到 30% 之间，如下面的 sn-p。

.slider {
  position: relative;
  height: 200px;
  width: 300px;
  background: gray;
  overflow: hidden;
}
.slide,
.slide img {
  position: absolute;
  top: 0;
  left: 0%;
  height: 100%;
  width: 100%;
}
.slide h1 {
  position: absolute;
  top: 20%;
  right: 0;
  height: 10%;
  color: white;
}
.slide p {
  position: absolute;
  top: 40%;
  left: 0;
  height: 60%;
  color: white;
}
.slide {
    transform: translateX(100%);
 -webkit-animation: slide 20s infinite linear;
}
.slide:nth-child(2) {
  -webkit-animation-delay: 5s;
}
.slide:nth-child(3) {
  -webkit-animation-delay: 10s;
}
.slide:nth-child(4) {
  -webkit-animation-delay: 15s;
}
@-webkit-keyframes slide {
  5% {
    transform: translateX(0); /* 1s 6s 11s 16s */
  }
  25% {
    transform: translateX(0); /* 5s 10s 14s 19s */
  }
  30% {
    transform: translateX(-100%); /* 6s 11s 16s 20s */
  }
  100% {
    transform: translateX(-100%);
  }    
}

<div class="slider">
  <div class="slide">
    <img src="http://lorempixel.com/300/200" />
    <h1>Slide 1</h1>

    <p>Text to do with slide 1</p>
  </div>
  <div class="slide">
    <img src="http://lorempixel.com/600/400" />
    <h1>Slide 2</h1>

    <p>Text to do with slide 2</p>
  </div>
  <div class="slide">
    <img src="http://lorempixel.com/1200/800" />
    <h1>Slide 3</h1>

    <p>Text to do with slide 3</p>
  </div>
  <div class="slide">
    <img src="http://lorempixel.com/1800/1200" />
    <h1>Slide 4</h1>

    <p>Text to do with slide 4</p>
  </div>
</div>

Answer 2

我最终使用了一个类似 ghant 的图表来处理正在发生的事情，并最终改变了我的关键帧动画。我还添加了第五组图像以保持整秒。

我最终得到：

.slider {
  position: relative;
  height: 200px;
  width: 300px;
  background: gray;
  overflow: hidden;
}
.slide,
.slide img {
  position: absolute;
  top: 0;
  left: 0;
  height: inherit;
  width: inherit;
}
.slide {
  transform: translateX(100%);
  -webkit-animation: slide 50s ease-in-out 0s infinite;
}
.slide h1 {
  position: absolute;
  top: 20%;
  right: 0;
  height: 10%;
  color: white;
}
.slide p {
  position: absolute;
  top: 40%;
  left: 0;
  height: 60%;
  color: white;
}
.slide:nth-child(2) {
  -webkit-animation-delay: 10s;
}
.slide:nth-child(3) {
  -webkit-animation-delay: 20s;
}
.slide:nth-child(4) {
  -webkit-animation-delay: 30s;
}
.slide:nth-child(5) {
  -webkit-animation-delay: 40s;
}
@-webkit-keyframes slide {
  0% {
    transform: translateX(100%);
  }
  2% {
    transform: translateX(0);
  }
  20% {
    transform: translateX(0);
  }
  22% {
    transform: translateX(-100%);
  }
  100% {
    transform: translateX(-100%);
  }
}

<div class="slider">
  <div class="slide">
    <img src="http://lorempixel.com/1800/1200" />
    <h1>Slide 1</h1>
    <p>Text to do with slide 1</p>
  </div>
  <div class="slide">
    <img src="http://lorempixel.com/1000/500" />
    <h1>Slide 2</h1>
    <p>Text to do with slide 2</p>
  </div>
  <div class="slide">
    <img src="http://lorempixel.com/200/100" />
    <h1>Slide 3</h1>
    <p>Text to do with slide 3</p>
  </div>
  <div class="slide">
    <img src="http://lorempixel.com/300/400" />
    <h1>Slide 4</h1>
    <p>Text to do with slide 4</p>
  </div>
  <div class="slide">
    <img src="http://lorempixel.com/600/800" />
    <h1>Slide 5</h1>
    <p>Text to do with slide 5</p>
  </div>
</div>

这让我可以在过渡之间保持动画流畅，也让我有足够的时间让用户阅读幻灯片的内容。

---

这个功能还允许我在悬停滑块时使用动画播放状态来暂停它:)

.slider:hover .slide{
    -webkit-animation-play-state: paused;
}