<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Pure CSS Page Transition Effect</title>
  <link href="style.css" rel="stylesheet">
</head>
<body>
  <a id="home">Home</a> <a id="about">About</a> <a id="portfolio">Portfolio</a> <a id="services">Services</a> <a id="contact">Contact</a>
  <nav>
    <ul>
      <li>
        <a href="#home">Home</a>
      </li>
      <li>
        <a href="#about">About</a>
      </li>
      <li>
        <a href="#portfolio">Portfolio</a>
      </li>
      <li>
        <a href="#services">Services</a>
      </li>
      <li>
        <a href="#contact">Contact</a>
      </li>
    </ul>
  </nav>
  <section id="home">
    <h1>Home</h1>
  </section>
  <section id="about">
    <h1>About</h1>
  </section>
  <section id="portfolio">
    <h1>Portfolio</h1>
  </section>
  <section id="services">
    <h1>Services</h1>
  </section>
  <section id="contact">
    <h1>Contact</h1>
  </section>
</body>
* {
  margin: 0;
  padding: 0;
}
body, html {
  text-align: center;
  height: 100%;
  overflow: hidden;
  font-family: poppins;
}
nav {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 10;
  background: darkcyan;
}
nav ul li {
  display: inline-block;
}
nav ul li a {
  color: #fff;
  font-size: 18px;
  display: block;
  text-decoration: none;
  padding: 25px;
}
section {
  height: 100%;
  width: 100%;
  display: table;
  pointer-events: none;
  z-index: 0;
  background: #262626;
  transition: transform 0.45s cubic-bezier(0, 0, 0.20, 1);
}
section h1 {
  display: table-cell;
  vertical-align: middle;
  text-align: center;
  color: #fff;
  font-weight: bold;
  font-size: 70px;
  text-transform: uppercase;
}
a[id="home"]:target~#home {
  transform: translate3d(0, 0, 0);
}
a[id="about"]:target~#about {
  transform: translate3d(0, -100%, 0);
}
a[id="portfolio"]:target~#portfolio {
  transform: translate3d(0, -200%, 0);
}
a[id="services"]:target~#services {
  transform: translate3d(0, -300%, 0);
}
a[id="contact"]:target~#contact {
  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.