css - 纯CSS水平图像 slider 的反向关键帧方向

Question

我只是想反转我的纯 css 水平图像 slider 滑动的方向。我尝试以相反的方向改变关键帧动画部分，同时使用 - 位置并将 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

实际上，除了添加 animation-direction: reverse 之外，您无需进行任何修改。到规则列表(或者您可以将其设置为 animation 速记中的值)。正如您所猜到的，添加这个属性值对会反转动画的流程。

当您在页面上放置 4 张图片(float: left，每张图片的宽度为 100%)时，第一张图片为 0%，第二张为 100%，第三张为 200%，第四张为 300%。您当前的动画所做的是 - 从 left: 0% 开始这意味着第一张图片在 View 中。一段时间后 left offset 设置为 -100%，这意味着页面上 100% 的第二张图像现在将显示(100% - 100% = 0%，因此它落在查看区域中)。同样，第 3 和第 4 也会显示。

现在要反转动画，您需要 left偏移量从 -300% 开始，这样第四张图像首先可见，然后向右滑动而不是向左滑动。 注意:如果您希望 DOM 中的第一张图像首先显示，请更改 float:left至 right对于 .slider3 figure img .

DOM 中的第四张图片首先出现: ( 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>

首先出现 DOM 中的第一张图像: ( 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>

您会注意到我添加了一个 backwards也给animation速记属性(property)。这代表 animation-fill-mode它使元素保持其最后一个关键帧的状态，直到动画开始为止。如果未添加此选项，则在开始时将显示第一张图片，然后立即使用 float:left 更改为第四张(无幻灯片)。反之亦然 float: right .

---

Amr Aly 的第二个答案会奏效(还有其他可能的方法)，但绝对没有理由让它变得如此复杂。