利用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實現此效果的介紹。