CSS Image Slider中的时序 [英] Timing within a CSS Image Slider

问题描述

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

我有90％的时间，但每个图像之间有一个空隙。 / p>

我知道这是一个时间问题，但我不能为我的生活消失而不破坏当前的功能。

到目前为止的代码：

  .slider {position：relative; height：200px; width：300px;背景：灰色overflow：hidden;}。slide，.slide img {position：absolute; top：0; left：0％;高度：100％; width：100％;}。slide h1 {position：absolute; top：20％; right：0;高度：10％; color：white;}。slide p {position：absolute; top：40％;左：0;身高：60％; color：white;}。slide {transform：translateX（100％）; -webkit-animation：slide 20s forward infinite;}。slide：nth-​​child（2）{-webkit-animation-delay：5s;}。 } .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>幻灯片1< / h1> < p>与幻灯片1相关的文字< / p> < / div> < div class =slide> < img src =http://lorempixel.com/600/400/> < h1>幻灯片2< / h1> < p>与幻灯片2相关的文字< / p> < / div> < div class =slide> < img src =http://lorempixel.com/1200/800/> < h1>幻灯片3< / h1> < p>与幻灯片3相关的文字< / p> < / div> < div class =slide> < img src =http://lorempixel.com/1800/1200/> < h1>幻灯片4< / h1> < p>与幻灯片4相关的文字< / p> < / div>< / div>  

我的设计将只适用于4张图片，您可以看到一个短暂的延迟，允许灰色背景出现在下一张图片之前。应该在屏幕上每个约5秒。我很乐意为此保留CSS关键帧（不是jquery或外部插件）。

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

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

任何帮助将是巨大的。

解决方案

修复的目的是使每个图片保持在屏幕上（固定状态或幻灯片进/出状态）1/4的动画持续时间。考虑到第一个5％是滑动，最后5％滑出，我们必须将滑动设置在25％和30％之间，如下面的代码段。

  .slider {position：relative; height：200px; width：300px;背景：灰色overflow：hidden;}。slide，.slide img {position：absolute; top：0; left：0％;高度：100％; width：100％;}。slide h1 {position：absolute; top：20％; right：0;高度：10％; color：white;}。slide p {position：absolute; top：40％;左：0;身高：60％; color：white;}。slide {transform：translateX（100％）; -webkit-animation：slide 20s infinite linear;}。slide：nth-​​child（2）{-webkit-animation-delay：5s;}。 } .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>幻灯片1< / h1> < p>与幻灯片1相关的文字< / p> < / div> < div class =slide> < img src =http://lorempixel.com/600/400/> < h1>幻灯片2< / h1> < p>与幻灯片2相关的文字< / p> < / div> < div class =slide> < img src =http://lorempixel.com/1200/800/> < h1>幻灯片3< / h1> < p>与幻灯片3相关的文字< / p> < / div> < div class =slide> < img src =http://lorempixel.com/1800/1200/> < h1>幻灯片4< / h1> < p>与幻灯片4相关的文字< / p> < / div>< / div>  

I am having an issue with timing within a CSS keyframe animation.

I have it 90% there, but am having a gap between each image on appearance.

I know this is a timing issue, but I can't for the life of me get the gap to disappear without breaking the current functionality.

Code so far:

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

In my snippet, you can see a short delay which allows the grey background to appear before the next image.

My design will only cater for 4 images,which should be on screen for around 5 seconds each. I'm happy to stay with CSS keyframes for this (not jquery or external plugins).

Please note I've removed prefixes so will currently support the webkit prefix.

Could someone please explain how I should be timing this? I'm pretty sure it's this 0% -> 5% transition, but I can't be sure?

any assistance here would be great.

解决方案

The fix is to make each image stay on screen (in a fixed state or a slide in/out state) for 1/4th of the animation's duration. Considering that for the first 5% it is sliding in and for the last 5% it is sliding out, we have to set the slide out to be between 25% and 30% like the below snippet.

.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 Image Slider中的时序的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！