Awesome Page Transitions With Css3

Hi guys. Do you want to create a webpage with awesome transitions then this tutorial will definately help you.In last couple of years developers used javascript for making transitions effects in the webpage.These were good but takes a little time to load the script.This tutorial is all about magic of CSS3. Here all amazing effects are to be displayed with css.
With :target element all operation is performed. It is really cool. Lets get started with this stuff.All we need is just simple html code an awesome css and little creativity.

Download the Code

Html Code:

<!-- Home -->
<div id="home" class="content">
   <h2>Home</h2>
   <p>----</p>
  </div>
  <!-- /Home -->
  
  <!-- Portfolio -->
  <div id="portfolio" class="panel">
   <div class="content">
    <h2>Amaging Clicks</h2>
    <p>-----</p>
    <ul id="works">
     <li><a href="#"><img src="images/portfolio_01.jpg" width="250"></a></li>
     <li><a href="#"><img src="images/portfolio_02.jpg" width="250"></a></li>
     <li><a href="#"><img src="images/portfolio_03.jpg" width="250"></a></li>
    </ul>
    <p class="footnote">Nice clicks by <a href="http://www.tricktodesign.com/">Tricktodesign</a>.</p>
   </div>
  </div>
  <!-- /Portfolio -->
  
  <!-- About -->
  <div id="about" class="panel">
   <div class="content">
    <h2>About</h2>
    <p>-----</p>
   </div>
  </div>
  <!-- /About -->
  
  <!-- Contact -->
  <div id="contact" class="panel">
   <div class="content">
    <h2>Contact</h2>
    <p>------</p>
    <form id="form">
     <p><label>Your Name</label><input type="text" /></p>
     <p><label>Your Email</label><input type="text" /></p>
     <p><label>Your Message</label><textarea></textarea></p>
    </form>
   </div>
  </div>

Brief Look :

Css Code:

Here starts the important part. We had assigned basic css in a file named demo. Css for <p> and <h> and other basic elements. Css for page are in seperate file.

The navigation bar Css is :

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

Switching between pages is the important part and all transition effects are shown up in this criteria. For this purpose we had to use :target element of css with our navigation panel. Its css is :

.panel{
 min-width: 100%;
 height: 98%;
 overflow-y: auto;
 overflow-x: hidden;
 margin-top: -150%;
 position: absolute;
 background: #000;
 box-shadow: 0px 4px 7px rgba(0,0,0,0.6);
 z-index: 2;
 -webkit-transition: all .8s ease-in-out;
 -moz-transition: all .8s ease-in-out;
 -o-transition: all .8s ease-in-out;
 transition: all .8s ease-in-out;
}
.panel:target{
 margin-top: 0%;
 background-color: #ffcb00;
}
#home:target ~ #header #navigation #link-home,
#portfolio:target ~ #header #navigation #link-portfolio,
#about:target ~ #header #navigation #link-about,
#contact:target ~ #header #navigation #link-contact{
 background: #000;
 color: #fff;
}

Hope this tutorial will help you.

source codrops