Loading Blog dengan @keyframe 2

Melanjutkan posting yang sebelumnya tentang Loading blog dengan @keyframe. kali ini saya akan share loading blog seperti pada blog ini di bagian sidebar.

video

Penerapan Pada Blog

Letakkan kode di bawah ini di atas kode ]]></b:skin>

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

Letakkan Kode di bawah ini di bagian code css bagian yang ingin di terapkan trik ini

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

11 komentar:

  1. keren keyframe nya :D
    # penyolongan-cheater.blogspot.com

    BalasHapus
  2. Kunjungan baliknya ya di http://ardi007jr.blogspot.com :D

    BalasHapus
  3. keren keyframe yang ini pada kemaren bro..
    hehe XD

    BalasHapus
  4. wuih mantep mas :)

    blogwalking [+] http://siapasihh.blogspot.com

    BalasHapus
  5. wah boleh dicoba nih

    visit febrianickle

    BalasHapus
  6. hehehe...jadi.,liat tuh punya saya.
    Makasih yaah

    BalasHapus