Beautiful Skiplinks with CSS3 Transitions

Original: http://jsfiddle.net/MoritzGiessmann/DFrVC/

HTML

<a href="#content">Some Skiplink</a>
<a href="#nav">Some other Skiplink</a>
<a href="#search">A third Skiplink</a>

Klick here and hit tab to jump through the focused links.

<!-- start slipsum code -->
<br>
<br>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
<br>
<br>

<div id="search">Search site</div>

<h1>Uuummmm, this is a tasty burger!</h1>
<p id="content">Well, the way they make shows is, they make one show. That show's called a pilot. Then they show that show to the people who make shows, and on the strength of that one show they decide if they're going to make more shows. Some pilots get picked and become television programs. Some don't, become nothing. She starred in one of the ones that became nothing.Well, the way they make shows is, they make one show. That show's called a pilot. Then they show that show to the people who make shows, and on the strength of that one show they decide if they're going to make more shows. Some pilots get picked and become television programs. Some don't, become nothing. She starred in one of the ones that became nothing. Well, the way they make shows is, they make one show. That show's called a pilot. Then they show that show to the people who make shows, and on the strength of that one show they decide if they're going to make more shows. Some pilots get picked and become television programs. Some don't,...

CSS

a {
    display:block;
    width:200px;
    height:50px;
    border-radius:0 0 5px 5px;
    background:#eee;
    text-align:center;
    box-shadow:0 2px 2px rgba(0,0,0,.4);
    line-height:50px;
    margin-left:-100px;
    position:absolute;
    left:50%;
    top:-100px;
     -webkit-transition: all 0.8s ease;  
     -moz-transition: all 0.8s ease;  
     -ms-transition: all 0.8s ease;  
     -o-transition: all 0.8s ease;  
     transition: all 0.8s ease;
    color:#000;
    text-decoration:none;

}

a:focus {
   top:-5px;
   outline:none;
}