Page Transition How To - html

Question

I am trying to create a full page transition using #Keyframes and CSS3 only without JavaScript.
Now I am stuck with my codes. Wondering if it is possible when I click on the link it will create a full page transition that moves from bottom to upward like this: http://burtonfeelgoodsnowboard.com/test/
Here's my HTML:
<div class="moveTop">
<h1>Page</h1>
<nav>
Page Up
</div>
and here's the CSS:
/*! HTML5 Boilerplate v4.3.0 | MIT License | http://h5bp.com/ */
html,
button,
input,
select,
textarea {
color: #222;
}
html {
font-size: 1em;
line-height: 1.4;
}
::-moz-selection {
background: #b3d4fc;
text-shadow: none;
}
::selection {
background: #b3d4fc;
text-shadow: none;
}
hr {
display: block;
height: 1px;
border: 0;
border-top: 1px solid #ccc;
margin: 1em 0;
padding: 0;
}
audio,
canvas,
img,
video {
vertical-align: middle;
}
fieldset {
border: 0;
margin: 0;
padding: 0;
}
textarea {
resize: vertical;
}
body{
font: 16px/1.5 'Lato', Arial, sans-serif;
background: #3498db;
color: #ffffff;
}
h1{
font-size: 50px;
font-weight: 300;
text-align: center;
}
span{
color: #2980b9;
font-weight: bold;
}
h2{
font-size: 35px;
text-align: left;
margin-left: -20px;
}
nav{
width: 28.09%;
margin: 0 auto;
display: block;
}
nav a {
font-size: 19px;
display: inline-block;
text-align: center;
font-family: 'Lato', sans-serif;
color: #2980b9;
font-weight: 400;
padding: 5px 15px;
text-transform: uppercase;
border-radius: 2px;
letter-spacing: 1px;
text-decoration: none;
margin-right: 10px;
border: 2px solid #ecf0f1;
border-radius: none;
}
nav a.active,nav a:hover {
background: #ecf0f1;
color: #3498db;
}
}
.moveTop{
-webkit-animation: moveToTop .6s ease both;
animation: moveToTop .6s ease both;
}
#keyframes moveFromTop {
from { -webkit-transform: translateY(-100%); transform: translateY(-100%); }
}
My JSFIDDLE: https://jsfiddle.net/6z5LsL6r/
Anyone who can show me the OUTPUT VIA JSFIDDLE?
Thank in advance guys!

Answer 1

You can use :target selector to work around: https://jsfiddle.net/6z5LsL6r/3/