利用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实现此效果的介绍。