如何使用CSS3设置ul背景图像fadeIn？

Question

I have an Unordered List in my page. Each li elements displayed with CSS3 rotate animation. I want to set background image with FadeIn effect just after li animation finished.

I write "addbg" Class for ul like this:

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; 

}

but nothing happen!

How can I do that?

My ul is like this:

             <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

You can't transition background-image property, however you can set the background-image to its :after :pseudo-element and transition its opacity .

Here's a quick example.

 #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> 

---

If you want to add a delay instead of :hover , you could define @keyframes and add delay ( 3s in the example below) to the animation and set the opacity of the #image:after to 1 after the animation has ended using JavaScript.

animation: fadeIn 1s 1 3s - fadeIn is the animation-name , 1s is the animation-duration , 1 is the animation-iteration and 3s is the 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> 

---

Alternatively, you could do a pure JavaScript animation using setTimeout() for the delay and setInterval() for the animation without using transition or @keyframes .

 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>