styles.css

html, body {
    height: 100%;
}

body {
    margin: 0;
    overflow: hidden;
}

.slide {
    text-align: center;
    height: 100%;
    width: 100%;
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 1;
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -webkit-flex-direction: column;
    -ms-flex-direction: column;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.slide > *{
    display: inline-block;
    vertical-align: middle;
}

.slide:first-child{
    top: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    left: 0 !important;
    z-index: 1;
}

.slide:target{
    z-index: 2;
}


/** ==== SLIDE BOTTOM ==== */

.slide.slideBottom {
    -webkit-transition: top 2s, bottom 2s;
    -o-transition: top 2s, bottom 2s;
    -moz-transition: top 2s, bottom 2s;
    transition: top 2s, bottom 2s;
    top: -100%;
    bottom: 100%;
}

.slide.slideBottom:target{
    top: 0;
    bottom: 0;
}


/** ==== SLIDE RIGHT ==== */

.slide.slideRight{
    -webkit-transition: left 2s, right 2s;
    -o-transition: left 2s, right 2s;
    -moz-transition: left 2s, right 2s;
    transition: left 2s, right 2s;
    left: -100%;
    right: 100%;
}

.slide.slideRight:target{
    left: 0;
    right: 0;
}


/** ==== SLIDE SQUASH ==== */

.slide.slideSquash {
    -webkit-transition: left 2s, right 2s;
    -o-transition: left 2s, right 2s;
    -moz-transition: left 2s, right 2s;
    transition: left 2s, right 2s;
    left: 100%;
    right: 100%;
    z-index: 1;
}

.slide.slideSquash:target{
    left: 0;
    right: 0;
}


#slide1 {
    background: LightSalmon;
}
#slide2 {
    background: LightCoral;
}
#slide3 {
    background: DeepSkyBlue;
}
#slide4 {
    background: limegreen;
}
#slideEnd {
    background: black;
}

#slideEnd span {
    color: white;
    text-decoration: none;
}