html - CSS3 -过渡-

Question

我有一个导航栏，我正在使用 css 在悬停时以及 li 类处于事件状态时突出显示。我想有一个淡入淡出背景的过渡。这就是我到目前为止所拥有的:

CSS:

#nav {height:32px; border-top: 1px solid #fff; border-right: 1px solid #FFFFFF; background: #141941 url('../img/topTierBG.gif') repeat-x; }
#nav ul {padding: 0px; list-style: none; height:32px; width:100%;  }
#nav li { position:relative; float: left; margin:0; border-left:1px solid #fff; line-height:30px; background: #141941 url('../img/topTierBG.gif') repeat-x; padding-top:0px;}
#nav a, #nav a:link, #nav a:visited, #nav a:hover, #nav a:active {width:156px; display:block; text-align:center; font-size:12px; text-decoration:none; color:#fff; margin: 0px 0px 0px 0px; -webkit-transition: background 0.5s linear; -moz-transition: background 0.5s linear; -o-transition: background 0.5s linear; transition: background 0.5s linear; }
#nav .active {text-align:center; text-decoration:none; padding:0; color:#fff; height:32px; background: #1D2248 url('../img/activeTab.gif') repeat-x; }
#nav a:hover, #nav a:active{background: #1D2248 url('../img/activeTab.gif') repeat-x; -webkit-transition: background 0.5s linear; -moz-transition: background 0.5s linear; -o-transition: background 0.5s linear; transition: background 0.5s linear; }

html:

<div id="nav"><ul id="xmp-nav">
<li class="active"><a href="/" style="width:196px;">HOME</a></li>
<li><a href="login.php" style="width:195px;">STAFF LOGIN</a></li>
<li><a href="resources.php" style="width:195px;">RESOURCES</a></li>
<li><a href="information.php" style="width:195px;">PARENT INFORMATION</a></li>
<li><a href="links.php" class="last" style="width:195px;">LINKS</a></li>
</ul></div>

问题是，当我将鼠标悬停在非事件选项卡上时，不会发生过渡，但是当我将鼠标悬停在已经事件的选项卡上时，会从非事件样式过渡到事件样式。

我期待听到您的想法，如果无法按照我列出的方式实现也没有问题。

Here is a link!

Answer 1

过渡是这样工作的:

1. 您有状态为 A 的元素(例如 li)。
2. 您将元素状态更改为 B(例如，通过向 li 添加新类或向其添加 :hover)，从而更改其属性(例如 background : 红色).
3. 在新的类/状态中，您要添加过渡，并设置要设置动画的属性(例如背景)。

现在您可以看到流畅的动画。

在您的示例中，您有两个转换:

1. "transition: background 0.5s linear;" on #nav a — 它没有工作，因为 #nav a< 中没有背景变化/strong> 悬停。
2. transition: background 0.5s linear; on #nav a:hover, #nav a:active — 这意味着改变背景的"#nav a" 从 "none" 到 "background: #1D2248 url('../img/activeTab.gif') repeat-x;" 带线性动画在 0.5 秒内。

我根据您的代码制作了简化的 jsfiddle，展示了如何在悬停时更改动画:

http://jsfiddle.net/hzTwz/