CSS 关键帧幻灯片不适用于背景图像

Question

使用第二个答案 found here .我将我的图像组合成一个 Sprite ，然后更新我的 CSS 以反射(reflect)关键帧元素，就像提供的示例中那样。 Sprite 图像(城堡)出现但没有出现幻灯片效果？我错过了什么？

示例 URL，主页上的中心元素:http://216.157.26.175/cookiedouglas/

这是我的 CSS:

.agentpress-pro-cookie  .home-featured .widget {
    /* background-color: rgba(255, 255, 255, 0.8); */
    background: url("http://216.157.26.175/cookiedouglas/wp-content/uploads/sites/58/2015/05/fort-myers-homes-for-sale.jpg");
    opacity: 0.95;
        content: '';
    /*    position: absolute;
        width: 400%;
        height: 100%; */
        z-index: -1;
     /*   background: url(http://placekitten.com/500/500/);  Image is 500px by 500px, but only 200px by 50px is showing. */
        animation: slide 3s infinite;
    }
    @keyframes slide {
        20% {
            left: 0;
        }
        40%, 60% {
            left: -50%;
        }
        80%, 100% {
            left: -100%;
        }
    }

Answer 1

使用浏览器(供应商)特定前缀。

浏览器前缀用于添加可能不属于正式规范的新功能，并用于实现尚未最终确定的规范中的功能。

CSS3 animation 就是这些功能之一。它在不同的浏览器中有部分支持。可以检查浏览器对 CSS3 动画的支持 here .

从上面的链接可以明显看出，要使动画在 IE 和 Firefox 以外的浏览器上工作，您需要 -webkit- 前缀。

此外，CSS 左属性仅适用于绝对定位的元素。

所以你应该尝试这样的事情(阅读片段中添加的评论以获得解释):

/*visible portion of the larger 5120x680 pixel image*/
.widget {
  width: 1024px;
  height: 680px;
  position: relative;
  overflow: hidden;
  border: 1px solid black;
}

.widget:before {
  content: '';
  position: absolute;
  /*needed for CSS left property to work*/
  width: 5120px;
  height: 680px;
  z-index: -1;
  /*ExampleImageSprite.jpg is a 5120x680 pixel image which is a combination of 5 individual 1024x680 pixel images*/
  background: url("https://dl.dropboxusercontent.com/u/192824325/00_sandbox/30150865/ExampleImageSprite.jpg");
  -webkit-animation: slide 10s infinite;
  animation: slide 10s infinite;
}

@-webkit-keyframes slide {
  0% {
    left: 0px;
  }
  20% {
    left: -1024px;
  }
  40% {
    left: -2048px;
  }
  60% {
    left: -3072px;
  }
  80% {
    left: -4096px;
  }
  100% {
    left: -5120px;
  }
}
@keyframes slide {
  0% {
    left: 0px;
  }
  20% {
    left: -1024px;
  }
  40% {
    left: -2048px;
  }
  60% {
    left: -3072px;
  }
  80% {
    left: -4096px;
  }
  100% {
    left: -5120px;
  }
}

<div class=widget></div>