Cara Membuat Effects Bergetar Pada Gambar

Assalamualaikum, salam sjtra , kali ini saya akan kongsikan cara untuk membuat gambar bergetar seperti mana yang di gunakan oleh blog igniel, Sebenarnya gambar bergetar ini di panggil hover image animation effect, Di mana effect ini hanya menggunakan css, dan ianya tidak menggunakan javascript sepertimana yang anda fikirkan.

Saya menerima email bertanyakan cara membuat gambar bergetar seperti mana yang di gunakan oleh blog igniel, dan kali ini saya akan kongsikan cara untuk membuat gambar bergetar sepertimana permintaan anda.

Efek hover CSS memberi kita kemampuan untuk menghidupkan perubahan pada nilai properti CSS. Dalam pelajaran berikut kita akan menindaklanjutinya dengan berbagai jenis efek yang dibuat khusus untuk digunakan dengan gambar. Namun, efek ini dapat membuat situs Anda terasa jauh lebih dinamis dan hidup. Efek yang akan kita gunakan hari ini semua menggunakan kode yang didukung oleh browser modern.

Kode CSS berikut menunjukkan cara menyajikan efek Gambar hover.

img.Onet4uShake:hover {
animation: Onet4uShake .82s cubic-bezier(.36, .07, .19, .97) both;
-moz-animation: Onet4uShake .82s cubic-bezier(.36, .07, .19, .97) both;
-webkit-animation: Onet4uShake .82s cubic-bezier(.36, .07, .19, .97) both;
-o-animation: Onet4uShake .82s cubic-bezier(.36, .07, .19, .97) both;
transform: translate3d(0, 0, 0);
backface-visibility: hidden;
perspective: 1000px
}
@keyframes Onet4uShake {
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 onet4uShake {
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 Onet4uShake {
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)}
}

Salin

Di sini saya menggunakan code css yang saya berikan nama Onet4uShake so untuk memasang efek anime ini ke dalam gambar, kita harus memasang code class Onet4uShake ke dalam gambar yang kita ingin memasang efek anime hover,
Saya berikan contoh code yang saya gunakan.

Berikut contoh code gambar dengan animation efek

<img class="Onet4uShake" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjJl3oWkeFZDxsXOsR6sqF2H2ax9fBXL2DSslNAC7W3sjIEXD1zB2knjSxf2RG7bAT7TLndm11zHVIubQ8Wc0_PbXcV_DAjemOrAL6mSvL7kE0_Pc8I6gYhrE9rrE_sCk-Ir0UchUXVQujV/s640/Katana+Responsive+Blogger+Template.png"/>
Salin

Di dalam code di atas saya menambahkan code class="Onet4uShake" seperti mana code css yang saya buat untuk gambar begetar ini.

Untuk demonya silakan click butang demoberikut

Baiklan sekian saja penerangan saya tentang Cara Membuat Effects Bergetar Pada Gambar ini, sekiranya anda ada pertanyaan silakan tinggalkan comment ataupun hubungi saya melalui contact page yang saya sediakan.