Cara Membuat Gambar Mempunyai Efek Animasi di Blogger

Efek Animasi | Monkonomon

Efek animasi adalah efek yang ditambahkan untuk menambah kesan tertentu pada sebuah obyek atau tampilan. Tujuannya adalah agar penonton dapat merasakan secara nyata apa yang ditampilkan, termasuk penyajian audionya. Meskipun begitu, efek animasi tidak hanya digunakan dalam pembuatan video.
Kompas

Efek animasi gambar akan secara otomatis berfungsi, sedangkan kode yang digunakan dalam cara ini hanya menggunakan kode CSS saja sehingga tidak akan membuat blog kamu menjadi berat.

Cara Membuat Gambar Mempunyai Efek Animasi

Pertama, buka Blogger > Template > Klik Edit HTML > Terapkan kode dibawah ini tepat sebelum / diatas kode ]]></b:skin>.

img,.pS img,.post img{animation:rahrubberB 1s}img:hover,.pS img:hover,.post img:hover{animation:rahshaked .88s cubic-bezier(.35,.07,.19,.97) both;-moz-animation:rahshaked .88s cubic-bezier(.35,.07,.19,.97) both;-webkit-animation:rahshaked .88s cubic-bezier(.35,.07,.19,.97) both;  -o-animation:rahshaked .88s cubic-bezier(.35,.07,.19,.97) both;  transform:translate3d(0,0,0);  backface-visibility:hidden; perspective:1000px;}@keyframes rahshaked { 10%, 90% { transform:translate3d(-1px,0,0)} 20%, 80% { transform:translate3d(2px,0,0)} 30%, 50%, 70% { transform:translate3d(-4px,0,0)} 40%, 60% { transform:translate3d(4px,0,0)}}@-webkit-keyframes rahshaked { 10%, 90% { transform:translate3d(-1px,0,0)} 20%, 80% { transform:translate3d(2px,0,0)} 30%, 50%, 70% { transform:translate3d(-4px,0,0)} 40%, 60% { transform:translate3d(4px,0,0)}}@-moz-keyframes rahshaked {10%,90% { transform:translate3d(-1px,0,0)} 20%, 80% { transform:translate3d(2px,0,0)} 30%, 50%, 70% { transform:translate3d(-4px,0,0)} 40%, 60% { transform:translate3d(4px,0,0)}}@keyframes rahrubberB{from{transform:scale3d(1,1,1)}30%{transform:scale3d(1.25,.75,1)}40%{transform:scale3d(.75,1.25,1)}50%{transform:scale3d(1.15,.85,1)}65%{transform:scale3d(.95,1.05,1)}75%{transform:scale3d(1.05,.95,1)}to{-webkit-transform:scale3d(1,1,1);transform:scale3d(1,1,1)}}

Kemudian Simpan Template, Lalu lihat perubahannya.

Source : icloudice

Berikut adalah Cara Membuat Gambar Mempunyai Efek Animasi di Blogger semoga bisa membantu dan jika ada yang perlu ditanyakan silahkan tanyakan dikolom komentar, Terimakasih.