Memperindah Loading Blog Dengan Keyframe

kali ini Kuntoro Cyber mau share artikel Memperindah Loading Blog Dengan Keyframe .. tau gak Keyframe ???? -_- .. kalo gak tau DEzooooo .. brakakakakakakakkaka .. Keyframe ini gunanya untuk apa ya ??? pokoknya untuk memperindah dengan CSS . gak usah basa - basa lagi yah langsung aja diliat .......

1. Login ke akun Blogger  sobat ..
2.Copy and paste Kode dibawah ini diatas ]]></b:skin>

#wrapper, #sidebar {

-webkit-animation: css3Animasi 4s ease-in;

-moz-animation: css3Animasi 4s ease-in;

-ms-animation: css3Animasi 4s ease-in;

-o-animation: css3Animasi 4s ease-in;

animation: css3Animasi 4s ease-in

}

@-webkit-keyframes css3Animasi {

0% {

opacity: 0;

-webkit-transform: scale(0);

-moz-transform: scale(0);

-o-transform: scale(0);

-ms-transform: scale(0);

transform: scale(0);

}

100% {

opacity: 1;

-webkit-transform: scale(1);

-moz-transform: scale(1);

-o-transform: scale(1);

-ms-transform: scale(1);

transform: scale(10);

}

}

@-moz-keyframes css3Animasi {

0% {

opacity: 0;

-webkit-transform: scale(0);

-moz-transform: scale(0);

-o-transform: scale(0);

-ms-transform: scale(0);

transform: scale(0);

}

100% {

opacity: 1;

-webkit-transform: scale(1);

-moz-transform: scale(1);

-o-transform: scale(1);

-ms-transform: scale(1);

transform: scale(10);

}

}

@-ms-keyframes css3Animasi {

0% {

opacity: 0;

-webkit-transform: scale(0);

-moz-transform: scale(0);

-o-transform: scale(0);

-ms-transform: scale(0);

transform: scale(0);

}

100% {

opacity: 1;

-webkit-transform: scale(1);

-moz-transform: scale(1);

-o-transform: scale(1);

-ms-transform: scale(1);

transform: scale(10);

}

}

@-o-keyframes css3Animasi {

0% {

opacity: 0;

-webkit-transform: scale(0);

-moz-transform: scale(0);

-o-transform: scale(0);

-ms-transform: scale(0);

transform: scale(0);

}

100% {

opacity: 1;

-webkit-transform: scale(1);

-moz-transform: scale(1);

-o-transform: scale(1);

-ms-transform: scale(1);

transform: scale(10);

}

}

@keyframes css3Animasi {

0% {

opacity: 0;

-webkit-transform: scale(0);

-moz-transform: scale(0);

-o-transform: scale(0);

-ms-transform: scale(0);

transform: scale(0);

}

100% {

opacity: 1;

-webkit-transform: scale(1);

-moz-transform: scale(1);

-o-transform: scale(1);

-ms-transform: scale(1);

transform: scale(10);

}

}

NB : kode yang berwarna merah bisa anda tentukan dengan pilihan anda ..
Contoh : jika ingin menampilkan pada sidebar hapus kode #wrapper , begitupun sebaliknya ...

Terima kasih sudah membaca artikel Memperindah Loading Blog Dengan Keyframe ... semoga bermanfaat untuk anda .. Silahkan tinggalkan komentar ..
sumber script