yap , hari ni menurut gw hari shit day gw , alias hari sial , dari tadi pagi aja udah sial gw , akibat OS ubuntu :( , gara gara dia laptop gw jadi blank , untung aada laptop kakak gw minjem sebentar untuk kasih ilmu sih buat kalian semua , kali ini , gw kasih tutorial cara membuat Loading blog dengan keyframe ..
untuk lebih lanjut , bagi yang ingin tau Keyframe dan CSS itu apa , silahkan cari aja di
google , lagi males jelasin nya , bagi yang udah mastah dikit , dikit aja bkan yang banyak :v . ini nihh cara nyaa
nah untuk DEMO nyaa , silahkan cek disini , dan lait aja Header (judul blog) liat effect nyaaa
CSS nyaa ini
@keyframes myfirst
{
from{opacity:0;}
to{opacity:10;}
}
@-moz-keyframes myfirst
{
from{opacity:0;}
to{opacity:10;}
}
@-webkit-keyframes myfirst
{
from{opacity:0;}
to{opacity:10;}
}
@keyframes
{
from{transform:translate(0px, 9000px)}
to{transform:translate(0px, 0px)}
}
@-moz-keyframes
{
from{-moz-transform:translate(0px, 9000px)}
to{-moz-transform:translate(0px, 0px)}
}
@-webkit-keyframes
{
from{-webkit-transform:translate(0px, 9000px)}
to{-webkit-transform:translate(0px, 0px)}
}
#header-wrapper {animation: myfirst 5s;-moz-animation: myfirst 5s;-webkit-animation: myfirst 5s;}
#content-wrapper {animation: myfirst 5s;-moz-animation: myfirst 5s;-webkit-animation: myfirst 5s;}
#main-wrapper {animation: myfirst 5s;-moz-animation: myfirst 5s;-webkit-animation: myfirst 5s;}
#sidebar-wrapper {animation: myfirst 5s;-moz-animation: myfirst 5s;-webkit-animation: myfirst 5s;}
#nav {animation: myfirst 5s;-moz-animation: myfirst 5s;-webkit-animation: myfirst 5s;}
h1,h2,h3,h4,h5,h6,a {animation: myfirst 5s;-moz-animation: myfirst 5s;-webkit-animation: myfirst 5s;}
h1,h2,h3,h4,h5,h6,.post img {animation: myfirst 5s;-moz-animation: myfirst 5s;-webkit-animation: myfirst 8s;}
Widget nya
#id-widget {animation: myfirst 5s;-moz-animation: myfirst 5s;-webkit-animation: myfirst 5s;}
note : yang tulisan warna merah itu ID widget nya , contoh mau dimana letakin nya (#header-wrapper , trus #sidebar-wrapper , dll , search google untuk selengkapnya , )
see you , selaamat mencobaaa
Saya tidak bertanggung jawab atas permasalahan , crash / error dalam melakukan sebuah tutorial diatas. Diharap kan sebelumnya membaca Kebjikan privacy sebelum menggunakan tutorial diatas http://minervation.blogspot.com/2013/11/priviacy-policy-kebijakan-privasi.html
A U R E L Y N E - Talk less , do some action !