Monday, February 19, 2018

Membuat Animasi Gambar Bergetar Dengan HTML Dan CSS


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.
Gambar Bergetar

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.

3 comments: