Unknown February 19, 2018 CSS 3 comments

Hai semuanya, pada tutorial kali ini kita akan belajar mengenai cara membuat animasi gambar bergetar dengan HTML dan CSS, langsung kita mulai belajar membuatnya.

Pertama, tulis syntax html seperti dibawah ini.

<h1>Animasi Gambar Bergetar</h1>
<p>Hover gambar dibawah ini.</p>
<img src="gambar.jpg" alt="Gambar Bergetar">

Kedua, setelah menulis syntax HTML diatas, tambahkan syntax CSS seperti dibawah ini.

img:hover{
    animation: bergetar 0.4s;
    animation-iteration-count: infinite;
  }
  @keyframes bergetar {
    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 melihat hasilnya, anda dapat melihanya pada demo animasi gambar bergetar dibawah ini.

Animasi Gambar Bergetar

Hover gambar dibawah ini.

Demikian, cara membuat animasi gambar bergetar dengan HTML dan CSS, semoga anda tertarik membuat animasi tersebut. Jika ada kesalahan, kekurangan atau hal hal lainnya, silahkan tulis komentar anda pada kolom komentar dibawah ya, terima kasih.

Semoga Bermanfaat.