<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CSS3 Creative Page Transition Animation</title>
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
font-family: 'Arial', sans-serif;
background: #f5f5f5;
color: #333;
overflow-x: hidden;
}
.page-container {
position: relative;
width: 100%;
height: 100vh;
overflow: hidden;
}
.page {
position: absolute;
width: 100%;
height: 100%;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
padding: 20px;
transition: transform 1s ease-in-out;
background: #fff;
box-shadow: 0 0 20px rgba(0,0,0,0.1);
}
.page h1 {
font-size: 3rem;
margin-bottom: 20px;
color: #3498db;
}
.page p {
font-size: 1.2rem;
max-width: 600px;
text-align: center;
margin-bottom: 30px;
line-height: 1.6;
}
.btn {
padding: 12px 30px;
background: #3498db;
color: white;
border: none;
border-radius: 30px;
font-size: 1rem;
cursor: pointer;
transition: all 0.3s ease;
text-decoration: none;
box-shadow: 0 4px 6px rgba(0,0,0,0.1);
}
.btn:hover {
background: #2980b9;
transform: translateY(-3px);
box-shadow: 0 6px 8px rgba(0,0,0,0.15);
}
/* Page transition animations */
.page:nth-child(1) {
z-index: 3;
transform: translateX(0);
}
.page:nth-child(2) {
z-index: 2;
transform: translateX(100%);
background: #f1c40f;
}
.page:nth-child(3) {
z-index: 1;
transform: translateX(200%);
background: #2ecc71;
}
/* Animation classes */
.slide-out {
transform: translateX(-100%) rotateY(30deg) scale(0.9);
opacity: 0.8;
}
.slide-in {
transform: translateX(0) rotateY(0) scale(1);
}
.slide-next {
transform: translateX(100%) rotateY(-30deg) scale(0.9);
opacity: 0.8;
}
/* Shape animations */
.shape {
position: absolute;
opacity: 0.1;
z-index: 0;
}
.circle {
width: 200px;
height: 200px;
border-radius: 50%;
background: #3498db;
animation: float 8s infinite ease-in-out;
}
.triangle {
width: 0;
height: 0;
border-left: 100px solid transparent;
border-right: 100px solid transparent;
border-bottom: 173px solid #e74c3c;
animation: float 10s infinite ease-in-out reverse;
}
.square {
width: 150px;
height: 150px;
background: #9b59b6;
animation: float 12s infinite ease-in-out;
}
@keyframes float {
0%, 100% {
transform: translateY(0) rotate(0deg);
}
50% {
transform: translateY(-50px) rotate(10deg);
}
}
</style>
</head>
<body>
<div class="page-container">
<!-- Shapes for background animation -->
<div class="shape circle" style="top: 20%; left: 10%;"></div>
<div class="shape triangle" style="top: 60%; left: 80%;"></div>
<div class="shape square" style="top: 30%; left: 70%;"></div>
<div class="shape circle" style="top: 70%; left: 20%; width: 100px; height: 100px;"></div>
<!-- Page 1 -->
<div class="page" id="page1">
<h1>Welcome</h1>
<p>Experience this beautiful CSS3 page transition animation. Click the button below to see the magic happen!</p>
<a href="#" class="btn" onclick="nextPage()">Next Page</a>
<!-- Inserted URL as requested -->
</div>
<!-- Page 2 -->
<div class="page" id="page2">
<h1>Amazing Effects</h1>
<p>This transition uses CSS3 transforms and animations to create a smooth, visually appealing experience between pages.</p>
<a href="#" class="btn" onclick="nextPage()">Next Page</a>
</div>
<!-- Page 3 -->
<div class="page" id="page3">
<h1>All Done!</h1>
<p>You've seen all the pages in this demo. Click the button to start over and see the animations again.</p>
<a href="#" class="btn" onclick="resetPages()">Start Over</a>
</div>
</div>
<script>
let currentPage = 1;
const totalPages = 3;
function nextPage() {
if (currentPage >= totalPages) return;
const current = document.getElementById(`page${currentPage}`);
const next = document.getElementById(`page${currentPage + 1}`);
current.classList.add('slide-out');
next.classList.add('slide-in');
if (currentPage + 2 <= totalPages) {
const nextNext = document.getElementById(`page${currentPage + 2}`);
nextNext.classList.add('slide-next');
}
currentPage++;
}
function resetPages() {
currentPage = 1;
// Reset all pages to original positions
for (let i = 1; i <= totalPages; i++) {
const page = document.getElementById(`page${i}`);
page.classList.remove('slide-out', 'slide-in', 'slide-next');
if (i === 1) {
page.style.transform = 'translateX(0)';
} else if (i === 2) {
page.style.transform = 'translateX(100%)';
} else {
page.style.transform = 'translateX(200%)';
}
}
}
</script>
</body>
</html>