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

Question

I want to make some text fade in. I've done such things using Javascript and setInterval. That works but it seems like too much gunk for such a simple effect.

Is there a CSS way to do a text fade in? For instance, it starts as 0% opacity and becomes 100% opaque over a time frame that I specify.

Thanks.

Answer 1

You can do it on :hover with CSS3 transformations. A very simple example: http://jsfiddle.net/xaBgQ/

Answer 2

不仅仅是CSS（在所有浏览器中），jQuery为这样的效果提供了一个很好的API， fadeIn方法可能是一个很好的选择。

Answer 3

CSS3过渡支持这一点，但支持目前有点不稳定。

Answer 4

Yes, your can user the CSS3 transition timing functions.

Have a look here for some examples:

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

Answer 5

Some ideas that come to mind:

1) An animation framework like jQuery, YUI, etc. Sure, those probably use setInterval internally but then it's their gunk and not yours.

2) CSS3 - If you only need to work on the latest browsers or have a fall back plan, this might be a good way to go. Plenty of examples if you Google for "CSS3 animation"

3) If your text is static and small, perhaps an animated GIF instead.

Hope this helps!