praise! Stunning page switching animation effect [with source code download]_html/css_WEB-ITnose

The following example lists a set of animations that can be applied to the page switching process to create an interesting navigation effect. Although some effects are very simple, just simple sliding movements, others use perspective and 3D Transforms to create some three-dimensional dynamic effects.

Download Now Online Demo

Warm reminder: To ensure the best results, please use IE10, Chrome, Browse in modern browsers such as Firefox and Safari.

CSS animations are divided into different groups based on the effects they implement. To show the page transition effect, we use the following structure:

<div id="pt-main" class="pt-perspective">    <div class="pt-page pt-page-1">        <h1 id="span-A-collection-of-span-strong-Page-strong-Transitions"><span>A collection of</span><strong>Page</strong> Transitions</h1>    </div>    <div class="pt-page pt-page-2"><!-- ... --></div>    <!-- ... --></div>

The position of the perspective container is relative, and we increase the perspective by 1200 pixels. All animation effects require the following styles:

.pt-perspective {    position: relative;    width: 100%;    height: 100%;    perspective: 1200px;    transform-style: preserve-3d;} .pt-page {    width: 100%;    height: 100%;    position: absolute;    top: 0;    left: 0;    visibility: hidden;    overflow: hidden;    backface-visibility: hidden;    transform: translate3d(0, 0, 0);} .pt-page-current,.no-js .pt-page {    visibility: visible;} .no-js body {    overflow: auto;} .pt-page-ontop {    z-index: 999;}

The above .pt-page-ontop style is used for some page transition effects, that is, we need to leave one page on another The top of a page. Here is a code example that shows animation classes and keyframe animation, scaling the web page in different directions and fading in and out:

/* scale and fade */ .pt-page-scaleDown {    animation: scaleDown .7s ease both;} .pt-page-scaleUp {    animation: scaleUp .7s ease both;} .pt-page-scaleUpDown {    animation: scaleUpDown .5s ease both;} .pt-page-scaleDownUp {    animation: scaleDownUp .5s ease both;} .pt-page-scaleDownCenter {    animation: scaleDownCenter .4s ease-in both;} .pt-page-scaleUpCenter {    animation: scaleUpCenter .4s ease-out both;} /************ keyframes ************/ /* scale and fade */ @keyframes scaleDown {    to { opacity: 0; transform: scale(.8); }} @keyframes scaleUp {    from { opacity: 0; transform: scale(.8); }} @keyframes scaleUpDown {    from { opacity: 0; transform: scale(1.2); }} @keyframes scaleDownUp {    to { opacity: 0; transform: scale(1.2); }} @keyframes scaleDownCenter {    to { opacity: 0; transform: scale(.7); }} @keyframes scaleUpCenter {    from { opacity: 0; transform: scale(.7); }}

For the purposes of this demonstration, we use The corresponding animation class is applied to the current page and the page that will be switched in, for example:

//... case 17:    outClass = 'pt-page-scaleDown';    inClass = 'pt-page-moveFromRight pt-page-ontop';    break;case 18:    outClass = 'pt-page-scaleDown';    inClass = 'pt-page-moveFromLeft pt-page-ontop';    break;case 19:    outClass = 'pt-page-scaleDown';    inClass = 'pt-page-moveFromBottom pt-page-ontop';    break; // ...

To view the demo, you can browse a complete set of pages by clicking the first button To toggle effects, you can also choose to preview a specific effect from the drop-down menu.

I hope you enjoy this and get inspired to create something even more exciting!

Download Now Online Demo