Using CSS transition to achieve animation effects

Today, on the Internet, I found the site http://studioantwork.com/, where the menu bar when the mouse hover when the transparency will be reduced, in general, we will use jquery to achieve this transition effect, but here the designers used a different method, It's a novelty for ignorant.

The following is the author's source code

/* 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;
		}

There are some new things to learn, you will encounter a lot of problems need to be recorded

I have a menu

<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>

How to implement this function.

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;
}

It seems to be OK, but it's not possible to run a discovery.

As a hard-pressed GIS engineer, for the CSS God Horse is really enough to understand, so decisively on the w3school to find help.

According to W3school in the CSS pseudo-class, in the CSS definition, a:hover must be placed after A:link and a:visited, is valid.

See http://www.w3school.com.cn/css/css_pseudo_classes.asp

So why Studioantwork in the writing is OK? I do not know a variety of reasons, I hope to have a friend to help out. But it doesn't prevent me from imitating, so I have the following code

#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;}

After testing, this will be OK.

In addition, through Google, found the http://www.189works.com/article-78327-1.html, here through the a:link,a:visited,a:hover to achieve this effect of the introduction.