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

Question

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

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

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

感谢您的帮助。

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

Answer 1

好吧，如果ypu只设置了WebKit属性（仅@-webkit-keyframes而只有-webkit-animation-...），那么它当然只能在WebKit中工作而不能在Firefox中工作 - 用{{1}添加它们前缀也是如此。同时删除-moz周围的引号，只留下'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过渡将为您设置此更改动画。）