CSS动画过渡 [英] CSS animation transition

问题描述

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

这是我在html中的代码：

 < UL> 
< li>< img width =500height =500src =http://img2.netcarshow.com/Ford-GT90_Concept_1995_800x600_wallpaper_01.jpg>< / li> 
将立GT;< IMG WIDTH = 500 HEIGHT = 500 SRC = http://img2.netcarshow.com/Mercedes-Benz-SLR_McLaren_2004_800x600_wallpaper_02.jpg >< /锂> 
将立GT;< IMG WIDTH = 500 HEIGHT = 500 SRC = http://img2.netcarshow.com/Porsche-911_Carrera_4S_2002_800x600_wallpaper_0d.jpg >< /锂> 
< / ul> 
  

这是我的css：

  ul {
 list-style：none; 
保证金：0; 
 padding：0; 
职位：亲属; 
} 
 
 li {
 position：absolute; 
} 
 
 li：nth-​​child（3）{
动画：xfade 15s 4s infinite; 
} 
 li：nth-​​child（2）{
动画：xfade 15s 8s infinite; 
} 
 li：nth-​​child（1）{
动画：xfade 15s 12s infinite; 
} 
 
 @keyframes xfade {
 17％{
 opacity：1; 
} 
 25％{
 opacity：0; 
} 
 92％{
 opacity：0; 
 
 
 $ / code $ / pre 
 
我创建了jsfidle，这样每个人都可以进行一些测试这个案例。  https://jsfiddle.net/ag0hLhnj/1/  
解决方案
无限动画在循环之间不能有延迟。这意味着延迟计时的唯一方法是在动画中缓冲它（使后面的动画更长，并在动画本身内置延迟）。  
 
 
虽然这在技术上可以用css来实现，但它不会很好地扩展。也就是说，在其他问题中有一个很好的例子： CSS动画延迟和关键帧 
 
 
 
相反，您可能想用jquery控制循环。
 
 
 （function（$）{//避免jQuery冲突的Closure $（window）.load（function（）{// after start HTML，图像已加载var itemInterval = 2500; var InfiniteRotator = {init：function（）{var initialFadeIn = 0; //初始淡入时间（以毫秒为单位）var fadeTime = 2500; //淡入淡出时间（以毫秒为单位） var numberOfItems = 3; //计算项目数量var currentItem = 0; //设置当前项目//显示第一个项目$（'ul li'）。eq（currentItem）.addClass（'current-item'）; //可以使用CSS规则添加一个类// $（'ul li'）。eq（currentItem）.fadeIn（fadeTime）; //或者可以淡入使用jQuery //通过项目循环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：没有;保证金：0;填充：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 完整性= SHA256-BbhdlvQf / xTY9gja0Dq3HiwQF8LaCRTXxZKRutelT44 = crossorigin = 匿名 >< ; /脚本> < UL> < li>< img width =500height =500src =http://img2.netcarshow.com/Ford-GT90_Concept_1995_800x600_wallpaper_01.jpg>< / li> < li>< img width =500height =500src =http://img2.netcarshow.com/Mercedes-Benz-SLR_McLaren_2004_800x600_wallpaper_02.jpg>< / li> <李>< IMG WIDTH = 500 HEIGHT = 500 SRC = http://img2.netcarshow.com/Porsche-911_Carrera_4S_2002_800x600_wallpaper_0d.jpg >< /立GT;< / UL>  

I have some problem with my animation transition time logic in my css. I have 3 images which have to slideshow. I want to change the image from image1 to image2 in 15 seconds and form image2 to image3 in 15 seconds and the go back from image 3 to image 1 in 30 seconds. I don't know how to do that with my css animation timing logic.

This is my code in 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>

And this is my 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;
  }
}

I create the jsfidle so everybody can make some test in this case. https://jsfiddle.net/ag0hLhnj/1/

解决方案

Infinite animations can't have a delay between cycles. Which means the only way to delay the timing is by buffering it within the animation (making the later animations longer and having a delay built into the animation itself).

While this is technically doable with css, it's not going to scale well. That said, there's an excellent example of just that on one of your other questions: CSS Animation Delay and Keyframe

Instead, you may want to control the loop with 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动画过渡的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！