如何使用CSS为div标签赋予fadein效果

时间:2013-01-12 12:47:30

标签: html css html5 css3

我在悬停上有Ul标记,我使用css显示div。 现在我希望div标签将是第一个fadein或任何其他效果,如animate等 我知道可以使用jQuery轻松完成,但想知道我是否可以使用Html5,css3,css实现此目的

Here JsFiddle

4 个答案:

答案 0 :(得分:2)

淡入http://jsfiddle.net/thebabydino/Cedue/7/

从来没有类似-webkit-opacity-moz-opacity

的内容

如果您要转换opacity,请写入

transition: opacity 1s

transition: 1s

答案 1 :(得分:2)

据我所知,从代码中删除display: none;display: block;行可启用动画: http://jsfiddle.net/Cedue/31/

(这是原始小提琴的副本,仅显示:删除了行。)但是,这会引发一个问题,即当文本被隐藏时,您可以访问,突出显示甚至悬停文本;如果你不希望有这种行为,你可能希望研究另一种隐藏它的方法,直到正确的区域悬停,例如用边距移动它。

正如Ana所提到的,如果您希望为整个淡入淡出设置动画,则应使用不透明度作为转换参数(例如:transition: opacity 1s ease;,并使用额外的行来支持单独的浏览器)。如果您使用背景作为过渡属性,就像在示例中一样,只有背景渐弱并且文本会立即显示。

编辑:由于我自己的好奇心,我在Chrome和Firefox下进行了测试,每个版本都适用于Windows和Mac,并且可以确认删除display行会导致动画对所有这些都有效。

答案 2 :(得分:0)

检查此site,它使用css和javascript。

纯CSS实现here

答案 3 :(得分:0)