如何使用CSS3設置ul背景圖像fadeIn？

Question

我的頁面中有一個無序列表。 CSS3中顯示的每個li元素都會旋轉動畫。 我想在li動畫完成后立即使用FadeIn效果設置背景圖像。

我為ul這樣寫“ addbg”類：

ul.addbg{
    background: transparent url(../img/circle-line.png) no-repeat 49% 94px;
    -webkit-transition:background 5.6s;  
    -moz-transition:background 5.6s;  
    -o-transition:background 5.6s;  
    transition:background 5.6s; 

}

但是什么也沒發生！

我怎樣才能做到這一點？

我的ul是這樣的：

             <ul class="addbg">
                <li>
                    <span>Text1</span>

                </li>
                <li>
                    <span>Text2</span>

                </li>
                <li>
                    <span>Text3</span>

                </li>
                <li>
                    <span>Text4</span>

                </li>
            </ul>

Answer 1

您不能轉換background-image屬性，但是可以將background-image設置為其:after ：pseudo-element並transition其opacity 。

這是一個簡單的例子。

 #image { position: relative; width: 300px; height: 100px; text-align: center; line-height: 100px; } #image:after { content: ''; position: absolute; left: 0; top: 0; width: 100%; height: 100%; background: url(http://www.lorempixel.com/300/100); opacity: 0; transition: opacity 1s; z-index: -1; } #image:hover:after { opacity: 1; } 

 <div id="image">Some Content</div> 

---

如果要添加延遲而不是:hover ，則可以定義@keyframes並在動畫中添加delay （下例中為3s ），並在動畫使用JavaScript結束后將#image:after的opacity設置為1 。

animation: fadeIn 1s 1 3s - fadeIn是animation-name ， 1s是animation-duration ， 1是animation-iteration ， 3s是animation-delay 。

 var img = document.getElementById('image'); var event = ['webkitAnimationEnd', 'animationend']; for (i = 0; i < event.length; i++) { img.addEventListener(event[i], function() { var ss = document.styleSheets; for (j = 0; j < ss.length; j++) { var rules = ss[j]; for (k = 0; k < rules.cssRules.length; k++) { var r = rules.cssRules[k]; if (r.selectorText == "#image::after" || r.selectorText == "#image:after") { r.style.opacity = 1; } } } }); } 

 #image { position: relative; width: 300px; height: 100px; text-align: center; line-height: 100px; } #image:after { content: ''; position: absolute; left: 0; top: 0; width: 100%; height: 100%; background: url(http://www.lorempixel.com/300/100); -webkit-animation: fadeIn 1s 1 3s; animation: fadeIn 1s 1 3s; z-index: -1; opacity: 0; } @-webkit-keyframes fadeIn { 0% { opacity: 0; } 100% { opacity: 1; } } @keyframes fadeIn { 0% { opacity: 0; } 100% { opacity: 1; } } 

 <div id="image">Some Content</div> 

---

另外，您可以使用setTimeout()作為延遲，使用setInterval()作為動畫，而不使用transition或@keyframes來制作純JavaScript動畫。

 var ss = document.styleSheets; for (i = 0; i < ss.length; i++) { var rules = ss[i]; for (j = 0; j < rules.cssRules.length; j++) { var r = rules.cssRules[j]; if (r.selectorText == "#image::after" || r.selectorText == "#image:after") { var op = 0; setTimeout(function() { var fadeIn = setInterval(function() { r.style.opacity = op; op += 0.005; if (op > 1) { clearTimeout(fadeIn); } }, 7) }, 3000) } } } 

 #image { position: relative; width: 300px; height: 100px; text-align: center; line-height: 100px; } #image:after { content: ''; position: absolute; left: 0; top: 0; width: 100%; height: 100%; background: url(http://www.lorempixel.com/300/100); z-index: -1; opacity: 0; } 

 <div id="image">Some Content</div>