<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Pure CSS Page Transition Effect</title>
</head>

<body>
  <a id="one">HOME</a>
  <a id="two">ABOUT</a>
  <a id="three">SERVICES</a>
  <a id="four">PORTFOLIO</a>
  <a id="five">CONTACT</a>
  <nav>
    <div class="box">
      <ul>
        <li><a href="#one">HOME</a></li>
        <li><a href="#two">ABOOUT</a></li>
        <li><a href="#three">SERVICES</a></li>
        <li><a href="#four">PORTFOLIO</a></li>
        <li><a href="#five">CONTACT</a></li>
      </ul>
    </div>
  </nav>
  <section id="one" class="bg-1">
    <h1>HOMEPAGE</h1>
  </section>
  <section id="two" class="bg-2">
    <h1>ABOUT</h1>
  </section>
  <section id="three" class="bg-3">
    <h1>SERVICES</h1>
  </section>
  <section id="four" class="bg-4">
    <h1>PORTFOLIO</h1>
  </section>
  <section id="five" class="bg-5">
    <h1>CONTACT</h1>
  </section>
</body>

</html>
* {
  margin: 0;
  padding: 0;
}
body,
html {
  text-align: center;
  height: 100%;
  overflow: hidden;
}
nav {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 10;
  background: #000;
}
nav ul li {
  display: inline-block;
}
nav ul li a {
  color: #fff;
  font-size: 18px;
  display: block;
  text-decoration: none;
  padding: 15px;
  font-family: poppins;
}
section{
  height:100%;
  width:100%;
  display:table;
  pointer-events:none;
  z-index:0;
  transition: transform 0.45s cubic-bezier(0,0,0.21,1);
}
section h1{
  display:table-cell;
  vertical-align:middle;
  text-align:center;
  color:#fff;
  font-weight:100;
    font-size:90px;
  font-family:poppins;
}
#one{
  background:#493323;
}
#two{
  background:#91684a;
}
#three{
 background:#eaac7f;
}
#four{
  background:#99bbad;
}
#five{
  background:#383a56;
}
a[id="one"]:target ~ #one{
  transform:translate3d(0,0,0);
}
a[id="two"]:target ~ #two{
  transform:translate3d(0,-100%,0);
}
a[id="three"]:target ~ #three{
  transform:translate3d(0,-200%,0);
}
a[id="four"]:target ~ #four{
  transform:translate3d(0,-300%,0);
}
a[id="five"]:target ~ #five{
  transform:translate3d(0,-400%,0);
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.