Timing within a CSS Image Slider

问题

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.

回答1:

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>

回答2:

I ended up using a ghant-like chart in order to work what was happening, and ended up altering my keyframe animation. I also added a fifth image set in order to keep to whole seconds.

I ended up with:

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

This allowed me to keep the animation smooth between transitions, and also allowed me to have enough time in order for the user to read the contents of the slide.

this functionality also allowed me to use animation-play-state to pause the slider when hovering it :)

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

来源：https://stackoverflow.com/questions/30329838/timing-within-a-css-image-slider

标签

css

css3

css-animations

keyframe