css-example.css

*{
margin: 0;
padding: 0;
}
body{
font-family: 'Open Sans', Arial, sans-serif;
font-size: 15px;
color: #fff;
overflow: hidden;
}
.container{
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
}
.container > input,
.container > span{
position: fixed;
bottom: 0;
width: 20%;
height: 34px;
line-height: 34px;
}

#radio-nav-1, #radio-nav-1 + span{left: 0%}
#radio-nav-2, #radio-nav-2 + span{left: 20%}
#radio-nav-3, #radio-nav-3 + span{left: 40%}
#radio-nav-4, #radio-nav-4 + span{left: 60%}
#radio-nav-5, #radio-nav-5 + span{left: 80%}

/*--------------NAVEGAÇÃO -----------*/
#radio-nav-1:CHECKED ~.scroll{
transform: translateY(0);
-webkit-transform: translateY(0);
}
#radio-nav-2:CHECKED ~.scroll{
transform: translateY(-100%);
-webkit-transform: translateY(-100);
}#radio-nav-3:CHECKED ~.scroll{
transform: translateY(-200%);
-webkit-transform: translateY(-200);
}#radio-nav-4:CHECKED ~.scroll{
transform: translateY(-300%);
-webkit-transform: translateY(-300);

}#radio-nav-5:CHECKED ~.scroll{
transform: translateY(-400%);
-webkit-transform: translateY(-400);
}
/*-------------- NAVEGAÇÃO -----------*/
.container > span{
background: #fff;
font-size: 16px;
font-weight: bold;
color: #48b188;
text-align: center;
cursor: pointer;
z-index: 10;

}
.container > input{
z-index: 15;
opacity: 0;
}
.container > input:checked + span,
.container > input:checked:hover + span{
background: rgba(46, 148, 109,1);
color:#fff;

}

.container > input:checked + span::after,
.container > input:checked:hover + span::after{
content: "";
width: 0;
height: 0;
position: absolute;
bottom:100%;
border:Solid Transparent;
border-bottom-color: rgba(46, 148, 109,1);
left: 65%;
margin-left:-15%;
}

.container > input:hover + span{
background: rgba(46, 148, 109,8);
color:#fff;

}

#section-1{background: #f47933;}
#section-2{background: #008fd5;}
#section-3{background: #3f689e;}
#section-4{background: #cf669c;}
#section-5{background: #4a3abe;}

.scroll, .section{
width: 100%;
height: 100%;
position: relative;
left: 0;
top: 0;
transition: all .6s ease-in-out;
-webkit-transition: all .6s ease-in-out;
}
.section{overflow: hidden;}
.logo{
position: relative;
margin: 0 auto;
width: 200px;
height: 200px;
background: #fff;
transform: translateY(-50%) rotate(45deg);
-Webkit-transform: translateY(-50%) rotate(45deg);
}

.logo span{
font-size: 30px;
position: absolute;
top: 150px;
left: 72px;
color: rgba(46, 148, 109, 1);
}

.section H2{
position: absolute;
font-size: 54px;
text-align: center;
font-weight: bold;
top: 50%;
margin-top: -70px;
width: 100%;
}

.section p{
position: absolute;
font-size: 16px;
text-align: center;
top: 50%;
left: 25%;
width: 50%;
}
/*-------------- ANIMAÇÕES DO TEXTO -----------*/

#radio-nav-1:checked ~ .scroll #section-1 h2,
#radio-nav-2:checked ~ .scroll #section-2 h2,
#radio-nav-3:checked ~ .scroll #section-3 h2,
#radio-nav-4:checked ~ .scroll #section-4 h2,
#radio-nav-5:checked ~ .scroll #section-5 h2{
animation: animeDown .7s ease-in-out .4s backwards;
-webkit-animation: animeDown .7s ease-in-out .4s backwards;
}

@keyframes animeDown{
0%{
transform: translateY(-50px);
-webkit-transform: translateY(-50px);
opacity: 0;
}
100%{
transform: translateY(0px);
-webkit-transform: translateY(0px);
opacity: 1;
}
}

#radio-nav-1:checked ~ .scroll #section-1 p,
#radio-nav-2:checked ~ .scroll #section-2 p,
#radio-nav-3:checked ~ .scroll #section-3 p,
#radio-nav-4:checked ~ .scroll #section-4 p,
#radio-nav-5:checked ~ .scroll #section-5 p{
animation: animeUp .7s ease-in-out .4s backwards;
-webkit-animation: animeUp .7s ease-in-out .4s backwards;
}

@keyframes animeUp{
0%{
transform: translateY(50px);
-webkit-transform: translateY(50px);
opacity: 0;
}
100%{
transform: translateY(0px);
-webkit-transform: translateY(0px);
opacity: 1;
}
}