Pure CSS Page Transition Effect

byCodingFlicks -November 21, 2020

0

Hello Friends, Today, I am sharing the code of a snippet based on how to create a pure CSS page transition effect. Only plain HTML and CSS were used while doing this project. First, I made a simple navbar, and then I used the target attribute and the CSS transform property to create this simple page transition effect. I have shared some CSS animation snippets before in my blog. Check those if you want.

HTML

<!DOCTYPE html>
<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>
</html>

CSS

* {
	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);
}

Please do not enter any spam link in the comment box.