I have been experimenting with creating a full page transition using @Keyframes and CSS3 only, completely bypassing the need for JavaScript. However, I've hit a roadblock in my coding process. I am curious to know if it's achievable that when a link is clicked, it triggers a full page transition that moves from bottom to top, similar to this example:
Below is the HTML code snippet I have been working on:
<div class="moveTop">
<h1>Page</h1>
<nav>
<a href="#" class="active">Page Up</a>
</div>
And here's the CSS styling I've implemented so far:
/*! HTML5 Boilerplate v4.3.0 | MIT License | http://h5bp.com/ */
html,
button,
input,
select,
textarea {
// CSS properties
}
// More CSS rules...
@media screen and (min-width: 769px) {
body{
// Body style declarations
}
h1{
// H1 styles
}
span{
// Span element styles
}
h2{
// H2 styles
}
nav{
// Nav styles
}
nav a {
// Nav links styles
}
nav a.active,nav a:hover {
// Active and hover styles
}
}
.moveTop{
// Animation properties
}
@keyframes moveFromTop {
// Keyframes animation declaration
}
You can check out my JSFIDDLE for a closer look at the code: https://jsfiddle.net/6z5LsL6r/
If anyone could assist me by providing the OUTPUT VIA JSFIDDLE, I would greatly appreciate it!
Thank you all in advance for your help!