Animation 如何使用CSS 3转换创建循环淡入/淡出图像效果？

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

代码如下：

（我确实使用jQuery实现了这一功能，但这使得Android手机上的浏览器速度缓慢且闪烁，因此我尝试使用CSS。）

谢谢你的帮助

---

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

啊，是的-这显示了CSS转换和CSS动画之间的差异

一旦您将

-webkit animation name

应用于元素，CSS动画就会运行，也就是说，它们可以完全从CSS运行

另一方面，转换仅在更改其应用于的CSS属性时运行。您可以通过CSS伪类（如

：hover

）或JavaScript来实现这一点

因此，为了使您的转换在不支持

-webkit动画的浏览器中工作，您需要每秒运行一次更改图像不透明度的JavaScript-
setInterval
是您的朋友

（请注意，您的JavaScript不会执行动画，它只会直接从1切换到0，然后每秒再切换一次。CSS转换将为您设置此更改的动画。）
好吧，如果ypu只设置WebKit属性（只有
@-WebKit关键帧
和只有
-WebKit动画-…
），当然，它只能在WebKit中使用，而不能在Firefox中使用-添加前缀为
-moz
。同时删除
'blink'
周围的引号，使其仅限于<代码>闪烁

并且它工作

它以什么方式不工作？在我的Mac电脑上使用Chrome 20！我在firefox上测试失败，但在Chrome上效果良好。我认为您可以将示例简化为

。objblink{-webkit animation:blink 2s ease in out infinite；}

谢谢您的建议。。但请注意，我不需要javascript，所以我只是在css中添加了一些内容：-moz动画：闪烁1s无限；并为-moz创建关键帧…@BinhNguyen:哦，当然，我忘了

-moz动画也可用。请记住，使用
setInterval
每秒更改一次不透明度不会像使用JavaScript制作整个动画那样降低性能。值得注意的是，在2016年，关键帧和动画不再需要任何供应商前缀。：）