Cara Pasang Animasi Gambar Pada Postingan

Baca Juga

CSS Animasi

Bismillah... pada malam minggu ini saya akan sedikit share tentang cara membuat animasi gambar pada postingan menggunakan CSS Keyframe, sobat pernah lihat pada blog tetangga, ketika  halaman blog load gambar dalam postingan muncul dari berbagai arah, kadang dari bawah kadang dari atas dari pinggir juga bisa, oke untuk membuat animasi seperti itu bisanya menggunakan CSS yang di sebut dengan CSS Keyframe.

Dalam postingan ini saya tidak akan membahas jauh tentang CSS keyframes jika sobat mau mendalaminya silahkan sobat bisa kunjungi beberapa situs di bawah ini. Contoh Animasi menggunkan CSS Keyframe Klik Disini

• W3C CSS Animations
• Mozilla CSS animations
• w3schools.com CSS Animasi

Oke sekarang kita langsung ke tutorial cara menysipkan CSS Keyframe dalam blogspot, untuk menambahkan CSS Animasi gambar dalam postingan  yang harus sobat lakukan adalah :

• Pertama sobat login ke Blogger
• Terus Masuk ke area Design/Rancangan Blog
• Langkah selanjutnya sobat masuk ke Area Edit HTML terus centang tanda Expand Widget Template
• Setelah itu sobat cari kode kode ]]></b:skin>
• Terus masukan kode di bawah ini  diatas kode ]]></b:skin>

CSS Keyframe

.post-body img {
animation: animasigambar 6s;
-moz-animation: animasigambar 6s; /* Firefox */
-webkit-animation: animasigambar 6s; /* Safari and Chrome */
-ms-animation: animasigambar 6s; /* IE 9 */
@keyframes animasigambar
{0%{transform:translate(0px, -9000px)}
25% {transform:rotate(-100deg)}
50% {transform:rotate(90deg)}
100%{transform:translate(0px, 0px)}}
@-moz-keyframes animasigambar
{0%{-moz-transform:translate(0px, -9000px);}
25% {-moz-transform:rotate(-100deg);}
50% {-moz-transform:rotate(90deg);}
100%{-moz-transform:translate(0px, 0px)}}
@-webkit-keyframes animasigambar
{0%{-webkit-transform:translate(0px, -9000px);}
25% {-webkit-transform:rotate(-100deg);}
50% {-webkit-transform:rotate(90deg);}
100%{-webkit-transform:translate(0px, 0px)}}
@-ms-keyframes animasigambar
{0%{-ms-transform:translate(0px, -9000px);}
25% {-ms-transform:rotate(-100deg);}
50% {-ms-transform:rotate(90deg);}
100%{-ms-transform:translate(0px, 0px)}}
}  

Setelah itu save template blog sobat dan lihat hasilnya.. mungkin itu saja tutorial pada kesempatan ini semoga berhasil. Good Luck Happy Blogging