Question

我的css中的动画转换时间逻辑存在问题。我有3张图片需要幻灯片放映。我想在15秒内将图像从image1更改为image2，并在15秒内将image2更改为image3，并在30秒内从图像3返回到图像1。我不知道如何用我的css动画定时逻辑来做到这一点。

这是我在html中的代码：

<ul>
  <li><img width="500" height="500" src="http://img2.netcarshow.com/Ford-GT90_Concept_1995_800x600_wallpaper_01.jpg"></li>
  <li><img width="500" height="500" src="http://img2.netcarshow.com/Mercedes-Benz-SLR_McLaren_2004_800x600_wallpaper_02.jpg"></li>
  <li><img width="500" height="500" src="http://img2.netcarshow.com/Porsche-911_Carrera_4S_2002_800x600_wallpaper_0d.jpg"></li>
</ul>

这是我的css：

ul {
  list-style: none;
  margin: 0;
  padding: 0;
  position: relative;
}

li {
  position: absolute;
}

li:nth-child(3) {
  animation: xfade 15s 4s infinite;
}
li:nth-child(2) {
  animation: xfade 15s 8s infinite;
}
li:nth-child(1) {
  animation: xfade 15s 12s infinite;
}

@keyframes xfade{
  17% {
    opacity:1;
  }
  25% {
    opacity:0;
  }
  92% {
    opacity:0;
  }
}

我创建了jsfidle，所以在这种情况下每个人都可以进行一些测试。 https://jsfiddle.net/ag0hLhnj/1/

Answer 1

无限动画在循环之间不能有延迟。这意味着延迟计时的唯一方法是在动画中缓冲它（使后面的动画更长，并在动画本身内置延迟）。

虽然这在技术上可以用css来实现，但它不会很好地扩展。也就是说，在其他一个问题上有一个很好的例子：CSS Animation Delay and Keyframe

相反，您可能希望使用jquery控制循环。

(function($){ // Closure to avoid jQuery conflicts
$(window).load(function() { //start after HTML, images have loaded

var itemInterval = 2500;

var InfiniteRotator =
{
  init: function()
  {
    var initialFadeIn = 0; //initial fade-in time (in milliseconds)

    var fadeTime = 2500; //cross-fade time (in milliseconds)
    var numberOfItems = 3; //count number of items
    var currentItem = 0; //set current item

    //show first item
    $('ul li').eq(currentItem).addClass('current-item'); // Can Add a Class With CSS Rules
    // $('ul li').eq(currentItem).fadeIn(fadeTime); // Or Can Fade-in using jQuery

    //loop through the items
    var infiniteLoop = setInterval(function(){

      if(currentItem == numberOfItems -1){
        currentItem = 0;
      }else{
        currentItem++;
      }

      $('ul li').removeClass('current-item');
      $('ul li').eq(currentItem).addClass('current-item');

    }, itemInterval);
  }
};

InfiniteRotator.init();

});       
})(jQuery);

ul {
  list-style: none;
  margin: 0;
  padding: 0;
  position: relative;
}

li {
  position: absolute;
  display:none;
}

li.current-item {
  display:inline-block;
}

<script
  src="https://code.jquery.com/jquery-2.2.4.min.js"
  integrity="sha256-BbhdlvQf/xTY9gja0Dq3HiwQF8LaCRTXxZKRutelT44="
  crossorigin="anonymous"></script>
  
<ul>
  <li><img width="500" height="500" src="http://img2.netcarshow.com/Ford-GT90_Concept_1995_800x600_wallpaper_01.jpg"></li>
  <li><img width="500" height="500" src="http://img2.netcarshow.com/Mercedes-Benz-SLR_McLaren_2004_800x600_wallpaper_02.jpg"></li>
  <li><img width="500" height="500" src="http://img2.netcarshow.com/Porsche-911_Carrera_4S_2002_800x600_wallpaper_0d.jpg"></li>
</ul>

CSS动画过渡

1 个答案: