CSS关键帧幻灯片无法在背景图像上工作

Question

使用第二个答案found here。我将我的图像组合成一个精灵，然后更新我的CSS以反映关键帧元素，就像在提供的示例中一样。精灵图像（城堡）出现但幻灯片效果不会发生？我错过了什么？

主页上的示例网址，中心元素：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 left propery仅适用于绝对定位的元素。

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

＆＃13;

＆＃13;

/*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;
  }
}

＆＃13;

<div class=widget></div>

＆＃13;

＆＃13;

＆＃13;