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％ - ＆gt; 5％过渡，但我不能确定？

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

Answer 1

修复方法是使每个图像保持在屏幕上（处于固定状态或滑入/滑出状态），持续时间为动画持续时间的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>

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;
}

CSS图像滑块

2 个答案: