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

使用第二个答案。我将图像组合成一个精灵，然后更新CSS以反映keyframes元素，如所提供的示例中所示。精灵图像（城堡）显示，但幻灯片效果不发生？我错过了什么

示例URL，主页上的中心元素：

这是我的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%;
        }
    }

使用浏览器（供应商）特定的前缀。

浏览器前缀用于添加可能不是正式规范一部分的新功能，以及在尚未最终确定的规范中实现功能

CSS3

动画

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

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

-webkit-

前缀

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

所以，您应该尝试以下方法（阅读代码段中添加的注释以获得解释）：

较大的5120x680像素图像的可见部分*/ .小部件{ 宽度：1024px； 高度：680px； 位置：相对位置； 溢出：隐藏； 边框：1px纯黑； } .widget:以前{ 内容：''； 位置：绝对位置； /*需要CSS左属性才能工作*/ 宽度：5120px； 高度：680px； z指数：-1； /*示例ImageSprite.jpg是一个5120x680像素的图像，它是5个单独的1024x680像素图像的组合*/ 背景：url（“https://dl.dropboxusercontent.com/u/192824325/00_sandbox/30150865/ExampleImageSprite.jpg"); -webkit动画：幻灯片10s无限； 动画：幻灯片10秒无限； } @-webkit关键帧幻灯片{ 0% { 左：0px； } 20% { 左：-1024px； } 40% { 左：-2048px； } 60% { 左：-3072px； } 80% { 左：-4096px； } 100% { 左：-5120px； } } @关键帧滑动{ 0% { 左：0px； } 20% { 左：-1024px； } 40% { 左：-2048px； } 60% { 左：-3072px； } 80% { 左：-4096px； } 100% { 左：-5120px； } }

---

你能更具体一点吗？我不明白。是的，我明白你所说的特定于浏览器的意思。不幸的是，它仍然没有动画。幻灯片{}元素到底是如何绑定到.widget的？我已经修复了代码片段，请在全屏窗口中查看。