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>

在我的代码片段中，您可以看到一个短暂的延迟，它允许灰色背景出现在下一张图片之前。

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

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

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

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

Answer 1

我最终使用了类似 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>

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

此功能还允许我使用 animation-play-state 在鼠标悬停时暂停滑块 :)

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

Answer 2

解决方法是让每个图像在屏幕上（固定状态或滑动 in/out 状态）停留 1/4 的动画持续时间。考虑到前 5% 是滑入，后 5% 是滑出，我们必须将滑出设置在 25% 到 30% 之间，如下面的代码片段所示。

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

CSS 图像滑块内的计时

Timing within a CSS Image Slider

css

keyframe

css-animations