html - 我将如何将过渡应用到导航元素？

Question

我基本上是在尝试向我的导航添加动画，因此当用户将鼠标悬停在链接上时，文本颜色会逐渐变为蓝色，然后逐渐变回黑色。我已经阅读了 transition 属性并在 Youtube 上观看了一些教程，但是当我将它应用到我自己的导航栏时我无法让它工作。

下面是我的 Codepen 的链接，如果有人能阐明这个问题，我将不胜感激..

谢谢

HTML:

<!-- header starts here -->
<header>
    <nav>
        <ul>
          <li><a href="">Home</a></li>
          <li><a href="">Contact</a></li>
          <li><a href="">About</a></li>
          <li><a href="">Service</a></li>
       </ul>
    </nav>
</header>

http://codepen.io/Clarkpen/pen/razMWB

Answer 1

在这里试试:

http://codepen.io/anon/pen/myMrRq

我在 anchor 上添加了一个过渡:

nav ul li a {
  transition:all 400ms ease-in;
}

请注意，添加供应商前缀是一种很好的做法:

nav ul li a {
  -webkit-transition: all 400ms ease-in-out;
  -moz-transition: all 1400ms ease-in-out;
  -o-transition: all 400s ease-in-out;
  transition: all 400ms ease-in-out;
}

编辑

我已经在此处编辑了您的代码笔，仅将过渡添加到导航链接:

http://codepen.io/anon/pen/RNZGpL