如何用CSS轉換一個元素的多個背景圖像

Question

我發現了一個解決方案來改變使用js的html元素的背景圖像，但我只想使用CSS轉換。我不希望編輯我的HTML只是CSS。

$(document).ready(function() { 
 
    var timeToDisplay = 2000; 
 

 
    var slideshow = $('#slideshow'); 
 
    var urls = [ 
 
     'http://sipi.usc.edu/database/preview/aerials/2.1.07.png', 
 
     'http://sipi.usc.edu/database/preview/aerials/2.1.06.png', 
 
     'http://sipi.usc.edu/database/preview/aerials/2.1.12.png' 
 
    ]; 
 

 
    var index = 0; 
 
    var transition = function() { 
 
     var url = urls[index]; 
 

 
     slideshow.css('background-image', 'url(' + url + ')'); 
 

 
     index = index + 1; 
 
     if (index > urls.length - 1) { 
 
      index = 0; 
 
     } 
 
    }; 
 
    
 
    var run = function() { 
 
     transition(); 
 
     slideshow.fadeIn('slow', function() { 
 
      setTimeout(function() { 
 
       slideshow.fadeOut('slow', run); 
 
      }, timeToDisplay); 
 
     }); 
 
    } 
 
     
 
    run(); 
 
});

#slideshow { 
 
    border: 1px solid gray; 
 
    height: 330px; 
 
    width: 592px; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div id="slideshow"></div>

解決方案jsfiddle

Answer 1

查找到CSS animation財產。

這個片段會給你一個想法......

#slideshow { 
 
    border: 1px solid gray; 
 
    height: 330px; 
 
    width: 592px; 
 
    -webkit-animation-name: background; 
 
    -webkit-animation-duration: 5s; 
 
    -webkit-animation-direction: alternate; 
 
    -webkit-animation-timing-function: linear; 
 
    -webkit-animation-iteration-count: infinite; 
 
} 
 

 
@-webkit-keyframes background { 
 
    0% { 
 
    background-image: url('http://sipi.usc.edu/database/preview/aerials/2.1.07.png'); 
 
    } 
 
    33% { 
 
    background-image: url('http://sipi.usc.edu/database/preview/aerials/2.1.06.png'); 
 
    } 
 
    100% { 
 
    background-image: url('http://sipi.usc.edu/database/preview/aerials/2.1.12.png'); 
 
    } 
 
}

<div id="slideshow"></div>