利用CSS Transition來實現動畫效果

今天在網上亂逛的時候發現了網站http://studioantwork.com/，其中功能表列當滑鼠懸浮時透明度會降低，一般來說，我們會使用jquery來實現這一過渡效果，不過在這裡設計者使用了一種不同的方法，對於孤陋寡聞的我來說實在是太新奇了。

以下是作者的源碼

/* fade */#title {       padding: 0px 0px 0px 0px;       float:left;       opacity: 1;       -webkit-transition: opacity 0.3s;       -moz-transition: opacity 0.3s;       -webkit-animation-timing-function: ease-out;       -moz-animation-timing-function: ease-out;}#title:hover {opacity: 0.5;}

有新鮮東西難免學習一下，在此中就會碰到很多問題需要記錄

我有一個菜單

<nav>     <ul id="main-nav">         <li><a href="http://www.w3school.com.cn">HOME</a></li>         <li><a href="#">a</a></li>         <li><a href="#">b</a></li>         <li><a href="#">c</a></li>     </ul></nav>

怎麼來實現這個功能呢。

nav ul li a{opacity:1;color:#000000;text-transform:uppercase;text-decoration:none;-webkit-transition: opacity 0.35s ease-out;      -moz-transition: opacity 0.35s ease-out;      -o-transition: opacity 0.35s ease-out;  }nav ul li a :hover{opacity:0.5;}

這麼看似乎是可以了，但是一運行發現是不行的。

作為一個苦逼的GIS工程師，對於CSS神馬的實在是有夠不懂的，於是果斷上w3school尋找協助。

根據w3school中對CSS偽類的說法，在 CSS 定義中，a:hover 必須被置於 a:link 和 a:visited 之後，才是有效。

詳見http://www.w3school.com.cn/css/css_pseudo_classes.asp

那麼為什麼studioantwork中的寫法就是OK的呢。各種原因我並不瞭解，希望有瞭解的朋友幫忙解惑。但這不妨礙我模仿，於是有了下面的代碼

#main-nav a{   opacity: 1;       -webkit-transition: opacity 0.3s;       -moz-transition: opacity 0.3s;       -webkit-animation-timing-function: ease-out;       -moz-animation-timing-function: ease-out;}#main-nav a:hover{opacity: 0.5; }

經實驗，這樣就OK了。

另外呢，通過google，找到了http://www.189works.com/article-78327-1.html，在此有通過a:link,a:visited,a:hover實現此效果的介紹。