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

Posted 2023-03-06

【中文标题】如何使用 CSS 3 过渡创建循环淡入/淡出图像效果？

【英文标题】：How can I create a looping fade-in/out image effect using CSS 3 transitions?

【发布时间】：2012-07-19 16:44:48

【问题描述】：

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

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

（我确实让它与 jQuery 一起使用，但这使得浏览器在 android 手机上运行缓慢且闪烁，所以我正在尝试使用 CSS。）

感谢您的帮助。

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

【问题讨论】：

它是怎么回事？在我的 Mac 上的 Chrome 20 中运行。

是的！我在 firefox 上测试失败，但它在 chrome 上工作正常

我认为您可以将示例简化为.objblink -webkit-animation: blink 2s ease-in-out infinite;

【参考方案1】：

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

【讨论】：

值得注意的是，在 2016 年，您不再需要关键帧和动画的任何供应商前缀。 :)

【参考方案2】：

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

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

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

因此，为了使您的转换在不支持 -webkit-animation 的浏览器中工作，您需要运行一些 JavaScript 以每秒更改一次图像的不透明度 - setInterval 是您的朋友。

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

【讨论】：

感谢您的建议.. 但请注意，我不需要 javascript，所以我只是在 css 中添加更多内容：-moz-animation:blink 1s infinite;并为 -moz 创建关键帧 ...

@BinhNguyen：哦，当然，我忘了-moz-animation 也可用。请记住，使用setInterval 每秒更改一次不透明度不会像使用 JavaScript 执行整个动画那样降低性能。