如何在不使用 setInterval 的情况下淡入文本？有没有 CSS 方法可以做到这一点？

Posted 2023-03-06

【中文标题】如何在不使用 setInterval 的情况下淡入文本？有没有 CSS 方法可以做到这一点？

【英文标题】：How to fade in text without using setInterval? Is there a CSS way to do this?

【发布时间】：2011-12-27 04:10:01

【问题描述】：

我想让一些文本淡入。我已经使用 javascript 和 setInterval 完成了这些事情。这行得通，但对于这样一个简单的效果来说，这似乎太多了。

有没有一种 CSS 方法可以让文本淡入？例如，它从 0% 的不透明度开始，并在我指定的时间范围内变为 100% 的不透明。

谢谢。

【问题讨论】：

是的...使用 css 和一行 javascript，但它需要是 css3，因此不支持旧版浏览器。

【参考方案1】：

想到的一些想法：

1) 像 jQuery、YUI 等动画框架。当然，那些可能在内部使用 setInterval 但那是他们的垃圾，而不是你的。

2) CSS3 - 如果您只需要在最新的浏览器上工作或有备用计划，这可能是一个不错的选择。如果你Google for "CSS3 animation"

有很多例子

3) 如果您的文本是静态且较小的，则可以使用动画 GIF。

希望这会有所帮助！

【参考方案2】：

是的，您可以使用 CSS3 过渡计时功能。

在这里查看一些示例：

http://www.the-art-of-web.com/css/timing-function/

【参考方案3】：

您可以使用 CSS3 转换在 :hover 上执行此操作。一个很简单的例子：http://jsfiddle.net/xaBgQ/

【讨论】：

很有趣，但这不是用来悬停的。我希望文本在页面首次出现时逐渐出现，然后保持可见。

是的，CSS3 转换只能发生在 CSS 可定位的事件上，例如 :hover、:active:、:focus 等。Javascript 是您所说的唯一方法。跨度>

【参考方案4】：

CSS3 过渡支持这一点，但目前支持有点参差不齐。

【参考方案5】：

不仅仅是 CSS（跨所有浏览器），jQuery 为此类效果提供了一个很好的 API，fadeIn 方法可能会很合适。