Efek loading dengan keyframe

MurliCyber    3/16/2014    Css3 , Original post , Tutorial blog    Comment   

Yeay,dikarenakan kemarin kemarin udah jarang post karena lagi menyelesaikan template ini XD jadi post nya pending dulu bentar,okay trick blogger loading dengan efek keyframe ini udah pernah gw post belum,kayak nya belum yahhh

apa itu loading dengan efek keyframe?

adalah loading blog dengan menggunakan css cuman di gabungkan dengan efek keyframe sehingga efek loading nya lebih mulus 

untuk demo nya silahkan kesini

udah tau kan?

yuk pasang

Efek yang di terapkan

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

1.efek skyin

-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.efek sistem

-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.efek system bar

-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}
} 

 Cara pasang nya

contoh:

#namacsskamu {
display: inline;
width: 229px;
overflow: hidden;
float: left;
padding-bottom: 1px;
height: 120px;
background: #666 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh6tAoGNevrJz3Fpn59hxzmQOZPk-EYgZD1iZljkVmSh59s5tIyEiM4jEnLqjKzRdmeebKPcWfseqTJ-IGDTZwU-3p7YH8fNxi5uXh7rhwdwavLp4D-7kXwUHml__oCHa57Iu_qlqt4im0/s1600/nopic.jpg) no-repeat center center;
margin: 1px;
-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}}

-kode yang warna ungu adalah nama css kamu misal nya mau di terapkan di header yaudah kode nya #header (setiap template kode nya berbeda beda) dan seterus nya

-kode yag warna merah adalah kode efek yang di atas tadi

gampang kan? kalau masih binggung tanyakan di komentar

see you

source