Cara Membuat Animasi Shake Pada Image dan Button dengan Css

Assalammuallaikum,
Mungkin Sedikit perbincangan kecil dari saya sebelum masuk ketutorial hari ini. Tahukan kalian, bahwa menulis sebuah artikel unik memang sangat perlu pemikiran yang objektif, penuh dengan ide-ide yang menarik juga yang lainnya. Namun kita juga tidak pasti setiap harinnya mendapatkan suatu ide untuk dijadikan sebagai objek kedalam artikel yang akan kita tulis untuk disajikan kepada pengunjung.

Dimana yang telah kita ketahui dan dapat disimpulkan bahwa, ada masanya dimana kita tidak selalu bisa berfikir dengan jernih atau susah berkonsentrasi untuk membuat artikel. Yang dengan jelas sudah tercatat, artikel mempunyai arti penting dalam sebuah Blog yang bisa disebut juga sebagai RAJA.

Oke mungkin saya rasa sudah cukup untuk basa-basinya, dan saya skip saja.

Untuk menu pembahasan hari ini yang akan saya berikan yaitu: Cara Membuat Animasi Shake Pada Image dan Button Dengan Css. Nah pasti diantara kalian telah banyak yang mengira, bahwa didalam nya tersisipkan javascript yang tidak lain yaitu untuk menjalankan sistem animasinya.

Tapi jawaban dari saya adalah, tidak! Karena disini kita hanya perlu menggunakan css, dengan css kita tidak perlu khawatir akan terjadinya pemberatan pada loading blog.

Bagaimana Cara Pembuatanya Dan Apa Saja Yang Dibutuhkan?

Untuk memulai langkah pada tutorial ini, kalian hanya membutuhkan langkah seperti berikut:

• Css
• Html

Dan untuk cara pembuatanya bisa kalian lihat dan perhatikan dengan seksama dibawah ini.

1. Membuat Animasi Shake Pada Image.

Langkah yang pertama yaitu, kita harus membuat sebuah Css, untuk contohnya sebagai berikut:

/* Seo Techman */
img:hover {
  animation: shake 0.5s;
  animation-iteration-count: infinite;
}

@keyframes shake {
  0% { transform: translate(1px, 1px) rotate(0deg); }
  10% { transform: translate(-1px, -2px) rotate(-1deg); }
  20% { transform: translate(-3px, 0px) rotate(1deg); }
  30% { transform: translate(3px, 2px) rotate(0deg); }
  40% { transform: translate(1px, -1px) rotate(1deg); }
  50% { transform: translate(-1px, 2px) rotate(-1deg); }
  60% { transform: translate(-3px, 1px) rotate(0deg); }
  70% { transform: translate(3px, 1px) rotate(-1deg); }
  80% { transform: translate(-1px, -1px) rotate(1deg); }
  90% { transform: translate(1px, 2px) rotate(0deg); }
  100% { transform: translate(1px, -2px) rotate(-1deg); }
}

Jika css nya sudah kalian buat seperti contoh diatas lanjut kelangkah berikutnya yaitu, buatlah sebuah kode Html. Sebagai contoh:

<img src="peanute.jpg" alt="Peanute" width="300" height="300">

Terakhir kalian simpan kedua file tersebut dengan format style.css dan index.html jika sudah, sekarang waktunya kalian lihat hasilnya dan apakah berjalan atau tidak.

2. Membuat Animasi Shake Pada Button.

Jika kalian ingin menerapkannya dengan objek button, bisa saja karena menurut saya itu sama halnya dengan yang pertama. Kenapa bisa sama? Ya dikarenakan memang tidak ada bedanya, disini kalian hanya sedikit mengubahnya pada bagian Css dan html.

Sebelumnya pada penarapan image Css terlihat seperti ini:

img:hover {
  animation: shake 0.5s;
  animation-iteration-count: infinite;
}

Lalu kalian rubah hingga menjadi seperti contoh berikut:

.button:hover {
  animation: shake 0.5s;
  animation-iteration-count: infinite;
}
.button {
  background: #49ACE1;
  width: 70px;
  height: auto;
  border: 2px solid #ddd;
  border-radius: 10px;
  color: #fff;
  padding: 10px;
  text-align: center;
  font-size: 17px;
}
@keyframes shake {
  0% { transform: translate(1px, 1px) rotate(0deg); }
  10% { transform: translate(-1px, -2px) rotate(-1deg); }
  20% { transform: translate(-3px, 0px) rotate(1deg); }
  30% { transform: translate(3px, 2px) rotate(0deg); }
  40% { transform: translate(1px, -1px) rotate(1deg); }
  50% { transform: translate(-1px, 2px) rotate(-1deg); }
  60% { transform: translate(-3px, 1px) rotate(0deg); }
  70% { transform: translate(3px, 1px) rotate(-1deg); }
  80% { transform: translate(-1px, -1px) rotate(1deg); }
  90% { transform: translate(1px, 2px) rotate(0deg); }
  100% { transform: translate(1px, -2px) rotate(-1deg); }
}

Untuk file htmlnya hanya berubah sedikit, bisa dilihat dan perhatikan:

<div class="button">
Klik Disini
</div>

Script diatas sebelumnya sudah saya uji coba terlebih dahulu, dan hasilnya pun 100% berjalan.

Untuk demonya bisa melalui link dibawah ini:

Live Demo

Ikuti langkah demi langkahnya seperti apa yang sudah dijelaskan diatas pada awal cara pembuatanya. Jika kalian masih bingung, silahkan dibaca ulang dari awal hingga menurut kalian sudah cukup mengerti.

Mungkin itu saja yang dapat saya berikan pada tutorial kali ini, seperti biasa mudah-mudahan bermanfaat apa yang saya bagikan dalam tutorial ini untuk kalian semua.

Demikianlah tutorial kali ini, cara membuat animasi shake image Dan Button. Bila ada pertanyaan, silahkan sampaikan pada kolom komentar dibawah.

Dan akhir kata saya ucapkan, terimakasih sampai bertemu kembali diartikel selanjutnya.

Virm Aditya

Berita teknologi informasi terkini

Share this post