animation - 如何使用 CSS 3 过渡创建循环淡入/淡出图像效果？

Question

我正在尝试为图像创建循环淡入/淡出效果。它在 Chrome 中工作，但在 Firefox 中不起作用。

这是代码：http: //jsfiddle.net/FTLJA/254/

（我确实让它与 jQuery 一起工作，但这使得浏览器在 Android 手机上变得缓慢和闪烁，所以我正在尝试使用 CSS。）

谢谢你的帮助。

更新：已修复..请再次检查链接

Answer 1

好吧，如果 ypu 只设置 WebKit 属性（only@-webkit-keyframes和 only -webkit-animation-...），那么它当然只能在 WebKit 而不是 Firefox 中工作 --moz也可以使用前缀添加它们。还要删除引号'blink'以使其仅保留...blink并且它可以工作http://jsfiddle.net/FTLJA/261/

Answer 2

是的——这显示了 CSS 过渡和 CSS 动画之间的区别。

CSS 动画在应用-webkit-animation-name到元素后运行，即它们可以完全从 CSS 运行。

另一方面，转换仅在您更改它们适用的 CSS 属性时运行。您可以通过 CSS 伪类（如:hover）或通过 JavaScript 来执行此操作。

所以，为了让你的过渡在不支持的浏览器中工作-webkit-animation，你需要运行一些 JavaScript 来改变图像的不透明度，这setInterval是你的朋友。

（请注意，您的 JavaScript 不会执行动画，它只会opacity从 1 直接切换到 0，然后每秒再切换回来。CSS 过渡将为您制作动画。）