Css 'Page' animation template "Slide"

by amindunited

HTML

<div class="pageWrap">
    <div class="page current" style="background: #334D5C">Page 1</div>
    <div class="page next" style="background: #45B29D">Page 2</div>
    <div class="page next" style="background: #EFC94C">Page 3</div>
    <div class="page next" style="background: #E27A3F">Page 4</div>
    <div class="page next" style="background: #DF5A49">Page 5</div>
</div>
<button id="prev">Prev</button>
<button id="next">Next</button>
<!--
<ul class="themeBox fullscreen">
    <li title="#334D5C" style="background: #334D5C"></li>
    <li title="#45B29D" style="background: #45B29D"></li>
    <li title="#EFC94C" style="background: #EFC94C"></li>
    <li title="#E27A3F" style="background: #E27A3F"></li>
    <li title="#DF5A49" style="background: #DF5A49"></li>
</ul>
-->

CSS

.pageWrap {
    width: 80%;
    height: 100%;
    position: absolute;
    left: 10%;
    top: 50px;
    border: solid 1px #999999;
}
.page {
    position: absolute;
    left: 0;
    background-color: rgba(127, 127, 127, .25);
    width: 100%;
    height: 100%;
}
.current {
    /*
    left: 0%;
    */
    -webkit-transform: translate3d(0%, 0, 0);
    transform: translate3d(0%, 0, 0);
}
.next {
    /*
    left: 100%;
    */
    -webkit-transform: translate3d(100%, 0, 0);
    transform: translate3d(100%, 0, 0);
}
.prev {
    -webkit-transform: translate3d(-100%, 0, 0);
    transform: translate3d(-100%, 0, 0);
}


.page.transition {
  
  //-webkit-transition-duration: .5s;
  //transition-duration: .5s;
  
}
/*
.pageWrap .scaleUpDown .page.transition {
    -webkit-animation: scaleUpDown .5s ease both;
	animation: scaleUpDown .5s ease both;
}
@-webkit-keyframes scaleUpDown {
	from { opacity: 0; -webkit-transform: scale(1.2); }
}
@keyframes scaleUpDown {
	from { opacity: 0; -webkit-transform: scale(1.2);         transform: scale(1.2); }
}
*/
.page {
    z-index: 0;
}
.page.current, .page.transition {
	visibility: visible;
	z-index: 10;
}
.current {
    /*
    left: 0%;
    */
    -webkit-transform: translate3d(0%, 0, 0);
    transform: translate3d(0%, 0, 0);
}
.next {
    /*
    left: 100%;
    */
    -webkit-transform: translate3d(100%, 0, 0);
    transform: translate3d(100%, 0, 0);
}
.prev {
    -webkit-transform: translate3d(-100%, 0, 0);
    transform: translate3d(-100%, 0, 0);
}


.pageWrap .prev.transition, .pageWrap .next.transition {
    
    -webkit-transform: translate3d(0%, 0, 0);
    transform: translate3d(0%, 0, 0);
    
    -webkit-animation: scaleDown .5s ease both;
	animation: scaleDown .5s ease both;
}

.pageWrap .current.transition {
    -webkit-animation: scaleUp .25s .4s ease both;
	animation: scaleUp .25s .4s ease both;
}


@-webkit-keyframes scaleUp {
	from { opacity: 0; -webkit-transform: scale(.7); }
}
@keyframes scaleUp {
	from { opacity: 0;...

JavaScript

$("#next").on('click', function() {
    gotoNextPage();
});

$("#prev").on('click', function() {
    gotoPrevPage();
});

function gotoNextPage() {
    var curr = $('.page.current').first();
    var next = $('.page.next').first();
    if (next.length <= 0) {
        next = $('.page.current').next();
    }
    
    $(curr).removeClass('current');
    $(curr).addClass('prev transition');
    $(next).removeClass('next');
    $(next).next().addClass('next transition');
    $(next).addClass('current transition');
    
    /* If using transition instead of animation */
    /*
    PrefixedEvent($(next)[0], 'transitionend', function(){
        $(next).removeClass('transition');
        enableAndDisableButtons();
    });
    
    PrefixedEvent($(curr)[0], 'transitionend', function(){

        $(curr).removeClass('transition');
        enableAndDisableButtons();
    });
    */
    
    /* If using animation instead of transition */
    PrefixedEvent($(next)[0], 'AnimationEnd', function(){
        $(next).removeClass('transition');
        enableAndDisableButtons();
    });
    
    PrefixedEvent($(curr)[0], 'AnimationEnd', function(){
        $(curr).removeClass('transition');
        enableAndDisableButtons();
    });

}


function gotoPrevPage () {
    var curr = $('.page.current').first();
    var next = $('.page.next').last();
    var prev = $('.page.prev').last();
    
    if (next.length <= 0) {
        next = $('.page.current').next();
    }
    
    $(prev).removeClass('prev').addClass('current transition');
    $(curr).removeClass('current').addClass('next transition');
    
    /* If using transition instead of animation */
    /*
    PrefixedEvent($(prev)[0], 'transitionend', function() {
        $(prev).removeClass('transition');
        enableAndDisableButtons();
    });
    
    PrefixedEvent($(curr)[0], 'transitionend', function() {
        $(curr).removeClass('transition');
    });
    */
    /* If using animation instead of transition */
   ...