CSS 动画未在基于 Webkit 的浏览器中运行答案

【问题标题】：CSS Animation not running in Webkit based browsersCSS 动画未在基于 Webkit 的浏览器中运行
【发布时间】：2015-01-30 09:08:15
【问题描述】：

我想用一些时间延迟连续切换一个图像和另一个图像，反之亦然。这在 Chrome 和 Safari 等 Webkit 浏览器中不起作用。

这就是我正在做的事情：

.bkgd_img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: -1;
}
.top {
  animation-name: toggle;
  animation-timing-function: ease-in-out;
  animation-iteration-count: infinite;
  animation-duration: 5s;
  animation-direction: alternate;
}
@keyframes toggle {
  0% {
    opacity: 1;
  }
  45% {
    opacity: 1;
  }
  55% {
    opacity: 0;
  }
  100% {
    opacity: 0;
  }
}

<img class="bottom bkgd_img" src="http://www.placehold.it/500/FF0000" />
<img class="top bkgd_img" src="http://www.placehold.it/500/FF9900" />

我遇到的问题是“顶部”图像永远不会变得透明，动画也不会发生。我哪里错了？

【问题讨论】：

你是工程师，修复它：DD
您的示例运行良好，但无法在 Chrome、Opera 或 Safari 中运行，因为这些 require the -webkit extenstion 也添加了，您就可以开始了。
@misterManSam 我在 chrome 中运行它
正如我所说，Chrome 在 Chrome、Safari、Opera、Firefox 和 IE 10 + 中需要 -webkit 扩展 :) this example works。 webkit 前缀放在非前缀属性之上。
@misterManSam，成功了！！！

标签： html css webkit css-animations

【解决方案1】：

我是否需要在基于 Webkit 的浏览器中为 CSS3 动画使用浏览器前缀？

是的，`-webkit-` 前缀目前仍是必需的。

看看this reference here——目前Chrome、Safari和Opera需要-webkit-前缀才能支持关键帧动画。

给未来读者的说明 — 随着浏览器供应商适应原生动画属性，这将在未来发生变化。确保在 webkit 前缀下面也使用了非前缀动画属性。

完整示例

注意：非前缀属性应放在-webkit- 前缀下方。这确保支持的浏览器将使用本机 CSS 属性。

动画属性已经浓缩为一个：animation: toggle 5s ease-in-out infinite alternate

.bkgd_img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: -1;
}
.top {
  -webkit-animation: toggle 5s ease-in-out infinite alternate;
  animation: toggle 5s ease-in-out infinite alternate;
}
@-webkit-keyframes toggle {
  0% {
    opacity: 1;
  }
  45% {
    opacity: 1;
  }
  55% {
    opacity: 0;
  }
  100% {
    opacity: 0;
  }
}

@keyframes toggle {
  0% {
    opacity: 1;
  }
  45% {
    opacity: 1;
  }
  55% {
    opacity: 0;
  }
  100% {
    opacity: 0;
  }
}

<img class="bottom bkgd_img" src="http://www.placehold.it/500/FF0000" />
<img class="top bkgd_img" src="http://www.placehold.it/500/FFFF00" />

【讨论】：

【解决方案2】：

您必须使用供应商特定的代码，您可以在下面的代码中查看它

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8" />
    <title>Document</title>
    <style>
        .bkgd_img {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: -1;

}
.top {
    -webkit-animation: 5s 'toggle' infinite alternate;
    -moz-animation: 5s 'toggle' infinite alternate;
    -o-animation: 5s 'toggle' infinite alternate;
    animation: 5s 'toggle' infinite alternate;
}
@keyframes 'toggle' {
   0% {
        opacity:1;
    }
    45% {
        opacity:1;
    }
    55% {
        opacity:0;
    }
    100% {
        opacity:0;
    }
}@-webkit-keyframes 'toggle' {
   0% {
        opacity:1;
    }
    45% {
        opacity:1;
    }
    55% {
        opacity:0;
    }
    100% {
        opacity:0;
    }
}@-moz-keyframes 'toggle' {
   0% {
        opacity:1;
    }
    45% {
        opacity:1;
    }
    55% {
        opacity:0;
    }
    100% {
        opacity:0;
    }
}@-o-keyframes 'toggle' {
   0% {
        opacity:1;
    }
    45% {
        opacity:1;
    }
    55% {
        opacity:0;
    }
    100% {
        opacity:0;
    }
}

    </style>
</head>
<body>
    <img class="bottom bkgd_img" src="xyz.jpg" />
    <img class="top bkgd_img" src="abc.jpg" />
</body>
</html>

【讨论】：

【解决方案3】：

您错过了供应商特定的 css 属性。

-webkit-animation: toggle 5s infinite; 

@-webkit-keyframes toggle {}

参考工作代码。 http://codepen.io/bhuvana/pen/dPYzdZ

【讨论】：

是否仍然需要包含所有 4 个供应商特定前缀：@-webkit-keyframes @-moz-keyframes @-o-keyframes @keyframes ？

【解决方案4】：

在 Firefox 32、IE10 和 Chrome 36 中测试了您的代码。它似乎在 IE 和 Mozilla 上运行良好。但不适用于铬。 Chrome 有不同的 CSS 符号，它无法读取它们，请使用下面的 chrome 代码。您可以为其他浏览器保留之前的代码

    .top {
        -webkit-animation-name:toggle;
        animation-name: toggle;
        -webkit-animation-timing-function: ease-in-out;
        -webkit-animation-iteration-count: infinite;
        -webkit-animation-duration: 5s;
        -webkit-animation-direction: alternate;
    }

    @-webkit-keyframes toggle {
        0% {
            opacity:1;
        }
        45% {
            opacity:1;
        }
        55% {
            opacity:0;
        }
        100% {
            opacity:0;
}
}

【讨论】：

【解决方案5】：

如果您想以一种简单的方式使用 JQuery。还有其他方法例如：toggle()

HTML：

<img class="bottom bkgd_img" src="xyz.jpg" id="img-change" />

jQuery:

$('#img-change').on({
'click': function () {
    var originalsrc = $(this).attr('src');
    var src = '';
    if (originalsrc == 'xyz.jpg') src = 'abc.jpg';
    if (originalsrc == 'abc.jpg') src = 'xyz.jpg';
    $(this).attr('src', src);
}

});

注意：我没有尝试过，但它可能有效。

【讨论】：

我正在寻找一个只有 CSS 本身的解决方案

我是否需要在基于 Webkit 的浏览器中为 CSS3 动画使用浏览器前缀？

是的，-webkit- 前缀目前仍是必需的。

完整示例

是的，`-webkit-` 前缀目前仍是必需的。