Web Page Transition Effect CSS3 & Html5

html, body { height:100%; } body { width:100%; background:#e6e6ce; overflow:hidden; }
#header{ position:absolute; z-index:2000; width:235px; }
#navigation { width:135px; display:block; list-style:none; z-index:3; }
#navigation li { }
#navigation a{ color:#444; display:block; background:#fff; 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; }
.content{ right:10px; left:200px; top:0px; position:absolute; }
.content h2{ font-size:60px; margin:0; padding:0 0px 20px 0px; color:#788c09; text-shadow:0px 1px 1px rgba(0,0,0,0.3); }
.content p{ font-size:18px; padding:10px; line-height:24px; color:#788c09; display:inline-block; background:cdcdab; padding:10px; margin:3px 0px; }
.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:#e6e6ce; }
#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; }
#works { padding:15px 0px; } #works li{ display:inline; } #works li a{ padding-right:10px; }
#works img { box-shadow:1px 1px 2px rgba(0,0,0,0.3); padding:12px; background:rgba(255,255,255,0.9); }

<div id="home" class="content">
<h2>Welcome To Hiox</h2>
<p>Hiox Softwares Pvt Ltd., is a leading web service provider & content management company in India
which focuses on providing cost effective and easy online web & content management product and services
like web hosting, domain registration, business solutions, software/application development, web content
development, internet solutions and web design, without compromising the quality.</p>
</div>
<div id="about" class="panel"><div class="content"><h2>About Us</h2>
<p>HIOX was started with one person in 2003 and has now grown to a company which employs more than 30 employees.
The company plans to raise the head count to 50, by the end of 2012. </p>
<p>Hiox is continually striving to acheive excellence. Build your mission and vision by holding hands with the
global provider of Business Process Outsourcing and software development Services, with proven results and consistent
delivery.</p></div></div>
<div id="portfolio" class="panel"><div class="content"><h2>Portfolio</h2>
<ul id="works"><li> <li> </div>
<div id="contact" class="panel">
<div class="content"><h2>Contact</h2><p>Muthukumar (Webdesigner)</p><br>
<div id="header">
<ul id="navigation">
<li> <li> <li> </ul>
</div>

Tagged in:

• Page Transition
• Page Transition css3
• Transition effect css3
• CSS3