Question

我只是试图改变我的纯css水平图像滑块滑动的方向。我尝试用相反的方向改变关键帧动画部分，同时-位置和切换left到right，我所做的一切都是允许一张幻灯片以正确的方向滑动然后由于我的图片float: left;

而空白空格

这是直播jsFiddle。和这是我尝试的Jsfiddle以及它的呈现方式（即 无法正常工作。它会滑过一个图像正确的方向，但不是其余的方向）

另外，我的代码如下。

加价：

<div class="slider3">
    <figure>
   <img src="http://img00.deviantart.net/a251/i/2007/347/c/8/drunk_santa_by_yakuks.png">
   <img src="http://img00.deviantart.net/a251/i/2007/347/c/8/drunk_santa_by_yakuks.png">
   <img src="http://img00.deviantart.net/a251/i/2007/347/c/8/drunk_santa_by_yakuks.png">
   <img src="http://img00.deviantart.net/a251/i/2007/347/c/8/drunk_santa_by_yakuks.png">
    </figure>
</div>

CSS：

.slider3 {
    width: 100%;
    max-width: 960px; 
    overflow: hidden;
}

.slider3 figure img {
      width: 25%;
    float: left;
    background: red;
}

.slider3 figure{
    width: 400%;
    position: relative;
    margin:0;
    padding: 0;
    animation: 10s slide infinite;
    -webkit-animation: 10s slide infinite;
}

@-webkit-keyframes slide {
    0% { left:0%; }
    16% { left:0%; }
    33% { left:-100%; }
    49% { left:-100%; }
    66% { left:-200%; }
    82% { left:-200%; }
    100% { left:-300%; }
}

Answer 1

Actually you don't have to do any modifications other than add animation-direction: reverse to the list of rules (or you can set it as a value in the animation shorthand). As you'd have guessed, adding this property-value pair would reverse the flow of your animation.

When you place 4 images on a page (with float: left and 100% width for each), the 1st image is at 0%, the 2nd is at 100%, 3rd at 200% and 4th at 300%. What your current animation does is - start with the left: 0% which means the first image is in view. After sometime the left offset is set as -100% and what this means is that the second image which was at 100% on the page will now get displayed (as 100% - 100% = 0% and so it lands in the viewing area). Similarly the 3rd and 4th also gets shown.

Now to reverse the animation, you need the left offset to start at -300% so that the fourth image is visible first and then it slides towards the right instead of slide towards the left. Note: If you want the first image in the DOM to show up first then change float:left to right for .slider3 figure img.

With fourth image in DOM appearing first: (float: left)

.slider3 {
  width: 100%;
  max-width: 960px;
  overflow: hidden;
}
.slider3 figure img {
  width: 25%;
  float: left;
  background: red;
}
.slider3 figure {
  width: 400%;
  position: relative;
  margin: 0;
  padding: 0;
  animation: 10s slide infinite reverse backwards;
  -webkit-animation: 10s slide infinite reverse backwards;
}
@-webkit-keyframes slide {
  0% {
    left: 0%;
  }
  16% {
    left: 0%;
  }
  33% {
    left: -100%;
  }
  49% {
    left: -100%;
  }
  66% {
    left: -200%;
  }
  82% {
    left: -200%;
  }
  100% {
    left: -300%;
  }
}
@keyframes slide {
  0% {
    left: 0%;
  }
  16% {
    left: 0%;
  }
  33% {
    left: -100%;
  }
  49% {
    left: -100%;
  }
  66% {
    left: -200%;
  }
  82% {
    left: -200%;
  }
  100% {
    left: -300%;
  }
}

<div class="slider3">
  <figure>
    <img src="http://lorempixel.com/200/200/nature/1">
    <img src="http://lorempixel.com/200/200/nature/2">
    <img src="http://lorempixel.com/200/200/nature/3">
    <img src="http://lorempixel.com/200/200/nature/4">
  </figure>
</div>

With first image in DOM appearing first: (float: right)

.slider3 {
  width: 100%;
  max-width: 960px;
  overflow: hidden;
}
.slider3 figure img {
  width: 25%;
  float: right;
  background: red;
}
.slider3 figure {
  width: 400%;
  position: relative;
  margin: 0;
  padding: 0;
  animation: 10s slide infinite reverse backwards;
  -webkit-animation: 10s slide infinite reverse backwards;
}
@-webkit-keyframes slide {
  0% {
    left: 0%;
  }
  16% {
    left: 0%;
  }
  33% {
    left: -100%;
  }
  49% {
    left: -100%;
  }
  66% {
    left: -200%;
  }
  82% {
    left: -200%;
  }
  100% {
    left: -300%;
  }
}
@keyframes slide {
  0% {
    left: 0%;
  }
  16% {
    left: 0%;
  }
  33% {
    left: -100%;
  }
  49% {
    left: -100%;
  }
  66% {
    left: -200%;
  }
  82% {
    left: -200%;
  }
  100% {
    left: -300%;
  }
}

<div class="slider3">
  <figure>
    <img src="http://lorempixel.com/200/200/nature/1">
    <img src="http://lorempixel.com/200/200/nature/2">
    <img src="http://lorempixel.com/200/200/nature/3">
    <img src="http://lorempixel.com/200/200/nature/4">
  </figure>
</div>

You'd notice that I have added a backwards also to the animation short-hand property. This stands for animation-fill-mode and it makes the element hold the state as at its last keyframe until the time the animation starts. If this isn't added there will be a snap at the start where the first image will display before immediately changing to 4th (no slide) with float:left and vice-versa for float: right.

Amr Aly's second answer will work (and there are other possible ways too) but there is absolutely no reason to make it so complex.

纯css水平img滑块

1 个答案: