Membuat Page Transition tanpa jQuery

~ Selamat Siang

Kemarin saya telah membat Page Transition dengan jQuery dan CSS tapi kali ini kita tidak akan menggunakan jQuery melainkan hanya menggunakan CSS. Walaupun tanpa jQuery "Page Transition" ini juga tidak kalah kerennya .

tampilannya seperti ini 

DEMO | DOWNLOAD

Pertama - tama mari kita buat struktur HTML nya 

HTML

        <a id="sesi-I">Section 1</a>

        <a id="sesi-II">Section 2</a>

        <a id="sesi-III">Section 3</a>

        

        <nav>

           <div class="container">

             <ul>

                <li><a href="#sesi-I">Halaman I</a></li>

                <li><a href="#sesi-II">Halaman II</a></li>

                <li><a href="#sesi-III">Halaman III</a></li>

             </ul>

           </div>

        </nav>

        

        <div id="sesi-I" class="section">

                  <h1>INI HALAMAN I</h1>

        </div>

        

        <div id="sesi-II" class="section">

     

                  <h1>INI HALAMAN II</h1>

        </div>

        

        <div id="sesi-III" class="section">

          

                  <h1>INI HALAMAN III</h1>

        </div>

lalu kita berikan style seperti berikut

CSS

*{

padding:0;

margin:0;

}

body, html {

  overflow: hidden;

  text-align: center;

  height: 100%;

}

/* navigasi */

nav {

position: fixed;

top: 0;

left: 0;

right: 0;

z-index: 10;

background: #212121;

}

  

ul li {

    display: inline-block; 

padding: 6px 15px; 

}

nav ul li:hover{

background:rgba(255,255,255,.10);

}

nav ul li a {

    color: rgba(255,255,255,0.45);

    font-size: 0.875rem;

    display: block;

    text-decoration: none;

padding: 42px 7px; 

    

}

a:hover {

    color: #fff;

}

/* Section */

.section {

  height: 100%;

  width: 100%;

  display: table;

  pointer-events: none;

  z-index: 0; 

  -webkit-transition: transform 0.45s cubic-bezier(0, 0, 0.21, 1);

  transition: transform 0.45s cubic-bezier(0, 0, 0.21, 1);

}

.section h1 {

    display: table-cell;

    vertical-align: middle;

    text-align: center;

    color: #fff;

    font-weight: lighter;

}

#sesi-I {

  background: #19B5FE;

}

#sesi-II {

  background: #6BB9F0;

}

#sesi-III {

  background: #2574A9;

}

/* animasi ketika ketika link di klik */

a[id= "sesi-I"]:target ~ #sesi-I {

    -webkit-transform: translate3d(0, 0, 0);

    transform: translate3d(0, 0, 0);

}

a[id= "sesi-II"]:target ~ #sesi-II {

    -webkit-transform: translate3d(0, -100%, 0);

    transform: translate3d(0, -100%, 0);

}

a[id= "sesi-III"]:target ~ #sesi-III {

    -webkit-transform: translate3d(0, -200%, 0);

    transform: translate3d(0, -200%, 0);

}

Tadaa, sudah selesai ...

Bagaimana? Sangat Mudah Bukan??

Selamat Mencoba ~