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

＆＃13;

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;}
}

＆＃13;

<div></div>

＆＃13;

Answer 2

这是一种平滑地继续从最后一个图像滑动到第一个图像的方向（并且无限地重复）的一种方法。与不透明度动画不同，需要额外的桥接图像来“链接”每组放映之间的最后一个动画。否则，最后在图像集之间显示空白帧，或者图像托盘向后飞到第一个图像。鉴于重复的第一图像，必须设置动画目标和时间。

关键帧表明该组中有3个图像。这使得4个图像的“托盘”（第一个重复），总共设置为400％宽度。然后将“viewbox”DIV元素设置为图像的原始大小，并使用overflow：hidden。对于动画参数，以下工作：

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

2 个答案: