頁面動畫轉換

我想創建一個漂亮的過渡使用@Keyframe CSS3，如果可能的話使用jQuery來處理按鈕的請求。頁面動畫轉換

基本概念是當「START ANIMATION」按鈕是點擊它必須動畫從第1頁恰好與此類似視頻2頁頁： http://goo.gl/tkyLnS

這裏是我的HTML：

<main> 
    <div class="cd-index cd-main-content"> 
     <div> 
      <h1>Animated Page Transition</h1> 

      <a class="cd-btn" href="about.html" data-type="page-transition">Start animation</a> 
     </div> 
    </div> 
</main>

這是我的CSS：

/* --------------------------------

Primary style 

-------------------------------- */ 
*, *::after, *::before { 
    box-sizing: border-box; 
} 

html { 
    font-size: 62.5%; 
} 

body { 
    font-size: 1.6rem; 
    font-family: "Open Sans", sans-serif; 
    color: #4089a6; 
    background-color: #ffffff; 
    -webkit-font-smoothing: antialiased; 
    -moz-osx-font-smoothing: grayscale; 
} 

a { 
    color: #283040; 
    text-decoration: none; 
} 

h1 { 
    color: #ffffff; 
    margin-bottom: 1em; 
    font-size: 2.2rem; 
} 
@media only screen and (min-width: 768px) { 
    h1 { 
    font-size: 4.4rem; 
    font-weight: 300; 
    } 
} 

/* -------------------------------- 

Patterns - reusable parts of our design 

-------------------------------- */ 
.cd-btn { 
    display: inline-block; 
    padding: 1.4em 1.6em; 
    margin-bottom: 2em; 
    border-radius: 50em; 
    background-color: #283040; 
    color: #ffffff; 
    font-weight: bold; 
    font-size: 1.3rem; 
    letter-spacing: 1px; 
    text-transform: uppercase; 
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.1); 
} 
.no-touch .cd-btn:hover { 
    background-color: #323c50; 
} 
.cd-about .cd-btn { 
    background-color: #4089a6; 
} 

/* -------------------------------- 

Main Components 

-------------------------------- */ 
body::after, body::before { 
    /* these are the 2 half blocks which cover the content once the animation is triggered */ 
    content: ''; 
    height: 50vh; 
    width: 100%; 
    position: fixed; 
    left: 0; 
    background-color: #ffffff; 
    z-index: 1; 
    /* Force Hardware Acceleration */ 
    -webkit-backface-visibility: hidden; 
    backface-visibility: hidden; 
    -webkit-transform: translateZ(0); 
    -moz-transform: translateZ(0); 
    -ms-transform: translateZ(0); 
    -o-transform: translateZ(0); 
    transform: translateZ(0); 
    -webkit-transition: -webkit-transform 0.4s 0.4s; 
    -moz-transition: -moz-transform 0.4s 0.4s; 
    transition: transform 0.4s 0.4s; 
} 
body::before { 
    top: 0; 
    -webkit-transform: translateY(-100%); 
    -moz-transform: translateY(-100%); 
    -ms-transform: translateY(-100%); 
    -o-transform: translateY(-100%); 
    transform: translateY(-100%); 
} 
body::after { 
    bottom: 0; 
    -webkit-transform: translateY(100%); 
    -moz-transform: translateY(100%); 
    -ms-transform: translateY(100%); 
    -o-transform: translateY(100%); 
    transform: translateY(100%); 
} 
body.page-is-changing::after, body.page-is-changing::before { 
    -webkit-transform: translateY(0); 
    -moz-transform: translateY(0); 
    -ms-transform: translateY(0); 
    -o-transform: translateY(0); 
    transform: translateY(0); 
    -webkit-transition: -webkit-transform 0.4s 0s; 
    -moz-transition: -moz-transform 0.4s 0s; 
    transition: transform 0.4s 0s; 
} 

main { 
    height: 100vh; 
    padding: 10px; 
    text-align: center; 
} 
main .cd-main-content { 
    position: relative; 
    height: calc(100vh - 20px); 
} 
main .cd-main-content > div { 
    height: 100%; 
    overflow: hidden; 
    overflow-y: auto; 
    -webkit-overflow-scrolling: touch; 
} 
main .cd-main-content::after, main .cd-main-content::before { 
    /* these are the 2 gradient overlay at the top and bottom of the .cd-main-content - to indicate that you can scroll */ 
    content: ''; 
    position: absolute; 
    left: 0; 
    height: 50px; 
    width: 100%; 
} 
main .cd-main-content::before { 
    top: 0; 
} 
main .cd-main-content::after { 
    bottom: 0; 
} 
main .cd-main-content.cd-index { 
    /* .cd-main-content basic style - index page */ 
    background-color: #4089a6; 
    /* vertically center its content */ 
    display: table; 
    width: 100%; 
} 
main .cd-main-content.cd-index > div { 
    /* vertically center the content inside the .cd-index */ 
    display: table-cell; 
    vertical-align: middle; 
} 
main .cd-main-content.cd-index::after { 
    background-color: rgba(64, 137, 166, 0); 
    background-image: -webkit-linear-gradient(bottom, #4089a6, rgba(64, 137, 166, 0)); 
    background-image: linear-gradient(to top,#4089a6, rgba(64, 137, 166, 0)); 
} 
main .cd-main-content.cd-index::before { 
    background-color: rgba(64, 137, 166, 0); 
    background-image: -webkit-linear-gradient(top, #4089a6, rgba(64, 137, 166, 0)); 
    background-image: linear-gradient(to bottom,#4089a6, rgba(64, 137, 166, 0)); 
} 
main .cd-main-content.cd-about { 
    /* .cd-main-content basic style - about page */ 
    background-color: #283040; 
} 
main .cd-main-content.cd-about > div { 
    padding-top: 50px; 
} 
main .cd-main-content.cd-about::after { 
    background-color: rgba(40, 48, 64, 0); 
    background-image: -webkit-linear-gradient(bottom, #283040, rgba(40, 48, 64, 0)); 
    background-image: linear-gradient(to top,#283040, rgba(40, 48, 64, 0)); 
} 
main .cd-main-content.cd-about::before { 
    background-color: rgba(40, 48, 64, 0); 
    background-image: -webkit-linear-gradient(top, #283040, rgba(40, 48, 64, 0)); 
    background-image: linear-gradient(to bottom,#283040, rgba(40, 48, 64, 0)); 
} 
main p { 
    width: 90%; 
    max-width: 768px; 
    margin: 3em auto; 
    font-size: 1.4rem; 
    line-height: 1.6; 
    color: #535966; 
    text-align: left; 
} 
@media only screen and (min-width: 768px) { 
    main { 
    padding: 20px; 
    } 
    main .cd-main-content { 
    height: calc(100vh - 40px); 
    } 
    main.cd-index > div { 
    padding-top: 200px; 
    } 
    main.cd-index > div { 
    padding-top: 50px; 
    } 
    main p { 
    font-size: 1.8rem; 
    line-height: 2; 
    } 
} 

.cd-cover-layer { 
    /* layer that covers the content when the animation is triggered */ 
    position: fixed; 
    left: 50%; 
    top: 50%; 
    bottom: auto; 
    right: auto; 
    -webkit-transform: translateX(-50%) translateY(-50%); 
    -moz-transform: translateX(-50%) translateY(-50%); 
    -ms-transform: translateX(-50%) translateY(-50%); 
    -o-transform: translateX(-50%) translateY(-50%); 
    transform: translateX(-50%) translateY(-50%); 
    height: calc(100% - 20px); 
    width: calc(100% - 20px); 
    opacity: 0; 
    visibility: hidden; 
    background-color: #4089a6; 
    -webkit-transition: opacity 0.4s 0.4s, visibility 0s 0.8s; 
    -moz-transition: opacity 0.4s 0.4s, visibility 0s 0.8s; 
    transition: opacity 0.4s 0.4s, visibility 0s 0.8s; 
} 
.cd-about .cd-cover-layer { 
    background-color: #283040; 
} 
.page-is-changing .cd-cover-layer { 
    opacity: 1; 
    visibility: visible; 
    -webkit-transition: opacity 0.3s 0s, visibility 0s 0s; 
    -moz-transition: opacity 0.3s 0s, visibility 0s 0s; 
    transition: opacity 0.3s 0s, visibility 0s 0s; 
} 
@media only screen and (min-width: 768px) { 
    .cd-cover-layer { 
    height: calc(100% - 40px); 
    width: calc(100% - 40px); 
    } 
} 

.cd-loading-bar { 
    /* this is the loding bar - visible while switching from one page to the following one */ 
    position: fixed; 
    z-index: 2; 
    left: 50%; 
    top: 50%; 
    height: 2px; 
    width: 90%; 
    background-color: #4089a6; 
    visibility: hidden; 
    -webkit-transition: visibility 0s 0.4s, -webkit-transform 0.4s 0s ease-in; 
    -moz-transition: visibility 0s 0.4s, -moz-transform 0.4s 0s ease-in; 
    transition: visibility 0s 0.4s, transform 0.4s 0s ease-in; 
    /* Force Hardware Acceleration */ 
    -webkit-backface-visibility: hidden; 
    backface-visibility: hidden; 
    -webkit-transform: translateZ(0); 
    -moz-transform: translateZ(0); 
    -ms-transform: translateZ(0); 
    -o-transform: translateZ(0); 
    transform: translateZ(0); 
    -webkit-transform: translateX(-50%) translateY(-50%); 
    -moz-transform: translateX(-50%) translateY(-50%); 
    -ms-transform: translateX(-50%) translateY(-50%); 
    -o-transform: translateX(-50%) translateY(-50%); 
    transform: translateX(-50%) translateY(-50%); 
} 
.cd-about .cd-loading-bar { 
    background-color: #283040; 
} 
.cd-about .cd-loading-bar::before { 
    background-color: #4089a6; 
} 
.cd-loading-bar::before { 
    /* this is the progress bar inside the loading bar */ 
    content: ''; 
    position: absolute; 
    left: 0; 
    top: 0; 
    height: 100%; 
    width: 100%; 
    background-color: #283040; 
    /* Force Hardware Acceleration */ 
    -webkit-backface-visibility: hidden; 
    backface-visibility: hidden; 
    -webkit-transform: translateZ(0); 
    -moz-transform: translateZ(0); 
    -ms-transform: translateZ(0); 
    -o-transform: translateZ(0); 
    transform: translateZ(0); 
    -webkit-transform: scaleX(0); 
    -moz-transform: scaleX(0); 
    -ms-transform: scaleX(0); 
    -o-transform: scaleX(0); 
    transform: scaleX(0); 
    -webkit-transform-origin: left center; 
    -moz-transform-origin: left center; 
    -ms-transform-origin: left center; 
    -o-transform-origin: left center; 
    transform-origin: left center; 
} 
.page-is-changing .cd-loading-bar { 
    visibility: visible; 
    -webkit-transform: translateX(-50%) translateY(-50%) scaleX(0.3); 
    -moz-transform: translateX(-50%) translateY(-50%) scaleX(0.3); 
    -ms-transform: translateX(-50%) translateY(-50%) scaleX(0.3); 
    -o-transform: translateX(-50%) translateY(-50%) scaleX(0.3); 
    transform: translateX(-50%) translateY(-50%) scaleX(0.3); 
    -webkit-transition: visibility 0s 0.3s, -webkit-transform 0.4s 0.4s; 
    -moz-transition: visibility 0s 0.3s, -moz-transform 0.4s 0.4s; 
    transition: visibility 0s 0.3s, transform 0.4s 0.4s; 
} 
.page-is-changing .cd-loading-bar::before { 
    -webkit-transform: scaleX(1); 
    -moz-transform: scaleX(1); 
    -ms-transform: scaleX(1); 
    -o-transform: scaleX(1); 
    transform: scaleX(1); 
    -webkit-transition: -webkit-transform 0.8s 0.8s ease-in; 
    -moz-transition: -moz-transform 0.8s 0.8s ease-in; 
    transition: transform 0.8s 0.8s ease-in; 
} 
@media only screen and (min-width: 768px) { 
    .cd-loading-bar { 
    width: calc(100% - 40px); 
    } 
}

如果你可以幫助使用JSFIDDLE來創建這種效果，看看我如何調整我的代碼將是偉大的。對我來說真的很難過。希望有人能幫助我的jsfiddle：

這是我到目前爲止有：https://jsfiddle.net/n0tmv50c/

來源

2015-06-12 Sam Norton

很遺憾，您的jsfiddle似乎並不在我的瀏覽器的工作，使我很難給出一個確切的答案。雖然我確實看過視頻，但我以一些代碼爲例。

a { 
 
    display: block; 
 
    position: absolute; 
 
    left: 50%; 
 
    top: 50%; 
 
    transform: translate(-50%, -50%); 
 
    width: 300px; 
 
    height: 300px; 
 
    background-color: #0ff; 
 
    transition: width 5s ease-out 1s, height 5s ease-out 1s, transform 1s ease-in-out 0s; 
 
} 
 

 
a:focus { 
 
    width: 20px; 
 
    height: 100px; 
 
    transform: translate(-50%, -50%) rotate(90deg); 
 
    transition-delay: 0s, 0s, 5s; 
 
}

<a href="#"></a>

來源

2015-06-12 15:55:04 BillyNate

頁面動畫轉換

回答

相關問題