css 中的图像滑块关键帧

Question

这是我的css幻灯片

    .slideshow figure {
position: relative;
width: 500%;
margin: 0;
left: 0;
animation: 10s slidey infinite; }

这是我的关键帧css

@keyframes slidey {
    0% { left: 0%;}
10% { left: 0%;}
20% { left: -100%; }
30% { left: -100%;}
40% {  left: -200%;}
50% { left: -200%;}
60% {  left: -300%; }
80% {   left: -300%;}
100% {   left: 0%;} }

我的问题是，如何让图像滑块循环回到第一张图片而不返回到之前的图片（我希望动画在返回到第一张图片时继续正确播放)

Answer 1

div {
    width: 200px;
    height: 200px;
    position: relative;
    -webkit-animation: mymove 5s infinite; /* Safari 4.0 - 8.0 */
    animation: mymove 10s infinite;
    background-size: 200px 200px;
    background-repeat: no-repeat;
}

/* Safari 4.0 - 8.0 */
@-webkit-keyframes mymove {
    0%   {opacity: 0;}
    25%  {opacity: 1;  background-image:url(https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcRjOqKI0kZG7nIV2w7AFRWfPUGiqeM0J26TbCp8irR1jZiNG556);}
    50%  {opacity: 0; }
    75%  {opacity: 1; background-image:url(https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcREaFRkgZSFrksv7yCBWBpfCBE7_VOVmA3ORqy5mPxAUn2BAJIW);}
    100% {opacity: 0;}
}

/* Standard syntax */
@keyframes mymove {
    0%   {opacity: 0;}
    25%  {opacity: 1;  background-image:url(https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcRjOqKI0kZG7nIV2w7AFRWfPUGiqeM0J26TbCp8irR1jZiNG556);}
    50%  {opacity: 0; }
    75%  {opacity: 1; background-image:url(https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcREaFRkgZSFrksv7yCBWBpfCBE7_VOVmA3ORqy5mPxAUn2BAJIW);}
    100% {opacity: 0;}
}

<div></div>

Answer 2

这里有一种方法可以平滑地继续从最后一张图片滑到第一张图片的方向（并无限重复）。与不透明动画不同，'chaining' 每组放映之间的最后一个动画需要额外的桥接图像。否则要么在图像集之间显示空白框，要么图像托盘向后飞到第一张图像。针对重复的第一张图片，需要设置动画目标和时间。

关键帧表明该集中有 3 张图像。这使得 'tray' 包含 4 张图像（第一张重复），总共设置为 400% 宽度。然后将 'viewbox' DIV 元素设置为图像的原始大小，并设置溢出：隐藏。对于动画参数，如下工作：

.slideshow {
  position: relative;
  overflow: hidden;
  /* 'viewbox' - set size below to match native image height & width */
  width: 400px; height: 300px;
}
figure img {
  float: left; 
}
figure {
  position: absolute;
  /* 3 images in set + repeated first image = 4 x 100% */
  width: 400%; 
  margin: 0;
  -webkit-animation: slidey 10s infinite;
  animation: slidey 10s infinite;
}

@-webkit-keyframes slidey {
  0%  { transform: translateX(0%); }
  25% { transform: translateX(0%); }
  33% { transform: translateX(-25%); }
  58% { transform: translateX(-25%); }
  66% { transform: translateX(-50%); }
  91% { transform: translateX(-50%); }
  100%{ transform: translateX(-75%); }
}

@keyframes slidey {
  0%  { transform: translateX(0%); }
  25% { transform: translateX(0%); }

  33% { transform: translateX(-25%); }
  58% { transform: translateX(-25%); }

  66% { transform: translateX(-50%); }
  91% { transform: translateX(-50%); }
  /* Sliding animation of last image back to first image here 
     Then the tray resets to 0% X position at new zero time 
       to show first image statically again */
  100%{ transform: translateX(-75%); }
}

HTML:

<div class="slideshow">
  <figure>
    <img src="pic1.jpg" alt="Pic1">
    <img src="pic2.jpg" alt="Pic2">
    <img src="pic3.jpg" alt="Pic3">
    <!-- repeated first image to enable chaining of first & last images -->
    <img src="pic1.jpg" alt="Pic1">
  </figure>
</div>

css 中的图像滑块关键帧

image slider keyframing in css

html

css

keyframe