頁面轉換如何

Question

我想創建一個完整的頁面轉換使用@Keyframes和CSS3只有沒有JavaScript。

現在我堅持我的代碼。想知道如果有可能，當我點擊鏈接它會創建一個完整的頁面過渡，從底部移動到向上這樣的：http://burtonfeelgoodsnowboard.com/test/

這裏是我的HTML：

<div class="moveTop"> 

<h1>Page</h1> 

    <nav>  
     <a href="#" class="active">Page Up</a> 

    </div> 

和這裏的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%); } 
} 

我的jsfiddle：https://jsfiddle.net/6z5LsL6r/

任何人誰可以告訴我的輸出通過的jsfiddle？

在此先感謝傢伙！

Answer 1

您可以使用:target選擇來解決：https://jsfiddle.net/6z5LsL6r/3/