Page transitions with CSS3

MARKUP

The HTML will contain five main divisions: a header and the four content sections. Each of the content sections is going to have an ID and the class panel. Moreover, we will add another division inside which will have the classcontent. The first content section which is #home will only have the content class and will not require an extra division:

<!-- Home -->
 <div id="home" class="content">
 <h2>Home</h2>
 Some content

<!-- ... --></div>
<!-- /Home -->

<!-- Portfolio --></pre>
<div id="portfolio" class="panel">
<div class="content">
<h2>Portfolio</h2>
Some content

<!-- ... --></div>
</div>
<!-- /Portfolio -->

<!-- About --></pre>
<div id="about" class="panel">
<div class="content">
<h2>About</h2>
Some content

<!-- ... --></div>
</div>
<!-- /About -->

<!-- Contact --></pre>
<div id="contact" class="panel">
<div class="content">
<h2>Contact</h2>
Some content

 <!-- ... --></div>
 </div>
 <!-- /Contact -->

<!-- Header with Navigation -->
 <div id="header">
 <h1>Page Transitions with CSS3</h1>
 <ul id="navigation">
 <li><a id="link-home" href="#home">Home</a></li>
 <li><a id="link-portfolio" href="#portfolio">Portfolio</a></li>
 <li><a id="link-about" href="#about">About Me</a></li>
 <li><a id="link-contact" href="#contact">Contact</a></li>
 </ul>
 </div>

The reason for having such an “unordered” structure by adding the header to the end, is that we make the navigation “reachable” using the general sibling selector (~), so that we can color the respective items differently.

Now, the main idea is to use the pseudo-class :target in order to add a transition to the current section. In this example, we will be sliding up and down our sections.

CSS

#header{
position: absolute;
z-index: 2000;
width: 235px;
top: 50px;
}
#header h1{
font-size: 30px;
font-weight: 400;
text-transform: uppercase;
color: rgba(255,255,255,0.9);
text-shadow: 0px 1px 1px rgba(0,0,0,0.3);
padding: 20px;
background: #000;
}
#navigation {
margin-top: 20px;
width: 235px;
display:block;
list-style:none;
z-index:3;
}
#navigation a{
color: #444;
display: block;
background: #fff;
background: rgba(255,255,255,0.9);
line-height: 50px;
padding: 0px 20px;
text-transform: uppercase;
margin-bottom: 6px;
box-shadow: 1px 1px 2px rgba(0,0,0,0.2);
font-size: 14px;
}
#navigation a:hover {
background: #ddd;
}