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：伪元素，将transition设置为opacity。< / p>

这是一个简单的例子。

#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结束动画后opacity到#image:after的{{1}}。

1 - animation: fadeIn 1s 1 3s是fadeIn，animation-name是1s，animation-duration是1和{{ 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; } }为延迟创建一个纯JavaScript动画，为动画创建<div id="image">Some Content</div>，而不使用setTimeout()或setInterval()。

transition

@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)
    }
  }
}

如何使用CSS3设置背景图像淡入淡出？

1 个答案: