Efek Loading Blog Menggunakan Keyframe

Newbanie Blog - Hallo sobat. Kali ini saya kembali dengan tutorial Membuat Efek Loading Blog Menggunakan Keyframe. Mungkin sobat bertanya tanya, apasih maksudnya? Nah agar kalian mengerti silakan refresh dulu halaman ini :)

Sudah mengerti? Keren bukan? Hehehe :D Sebenarnya efek ini hanya menggunakan kode CSS, murni CSS. Selain sebagai variasi juga menambah keren blog kita secara kasat mata :D

Penerapan
Kali ini saya akan share tentang loading blog dengan efek SKYIN, SYSTEM_BAR dan SYSTEM :

1. SYSTEM_BAR efek nya dari bawah naik ke atas
2. SKYIN efek nya dari atas turun ke bawah
3. SYSTEM efeknya keluar dari samping kiri

Ini adalah contoh penerapannya.
1. Menggunakan Efek Skyin
Efek ini saya gunakan untuk css #wrapper , berikut adalah kodenya

#wrapper{
-webkit-animation:Skyin 4s;
-moz-animation:Skyin 4s;
}
@-webkit-keyframes Skyin{from{-webkit-transform:translate(0px,-1000px)}to{-webkit-transform:translate(0px,0px)}
}
@-moz-keyframes Skyin{from{-moz-transform:translate(0px,-1000px)}to{-moz-transform:translate(0px,0px)}
}

2. Menggunakan Efek System
Efek system saya terapkan pada #artikel

#artikel {
-moz-animation:System 5s;
-webkit-animation:System 5s;
}
@-webkit-keyframes System{from{-webkit-transform:translate(0px,1000px);opacity:0}to{-webkit-transform:translate(0px,0px);opacity:1}
}
@-moz-keyframes System{from{-moz-transform:translate(0px,1000px);opacity:0}to{-moz-transform:translate(0px,0px);opacity:1}
}

3. Menggunakan Efek System Bar
Efek ini saya gunakan pada #comments

#comments {
-webkit-animation:System_Bar 4s;
-moz-animation:System_Bar 4s;
}
@-webkit-keyframes System_Bar{from{-webkit-transform:translate(-1000px,0px);opacity:0}to{-webkit-transform:translate(0px,0px);opacity:1}
}
@-moz-keyframes System_Bar{from{-moz-transform:translate(-1000px,0px);opacity:0}to{-moz-transform:translate(0px,0px);opacity:1}
}

Selamat mencoba :)

Tweet