CSS动画过渡

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>