Cara Membuat Gambar Bergetar dengan CSS3 Animasi

Your Ads Here

Hehe, CSS3 Animasi lagi nih sob .. pada kesempatan kali ini saya akan berbagi catatan/tutorial mengenai sedikit css3 transform yang di buat khusus untuk effect gambar bergetar apabila di sentuh , untuk sobat yang gak sabar pengen lihat langsung demo nya , silahkan sentuh pada gambar logo kang rian dibawah ini :

Untuk tutorial nya silahkan sobat simak langsung Markup HTML dan Struktur CSS dibawah ini :

Markup HTML :

<img class="digoyang" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgS2VgGZAStjZ7VJSwHzDIQ2qjGgrl7cVVO1i019_Ilv4FBeTaFVHqsfaAw6CVNNwpCyXgAZFkBulxMHsLOyh7fEWyXFT41S9kPBgKuvFGR5lyUNlo1x5doP3nrooMOidnM9BryISav_-mx/s1600/Kang+Rian.png"/>

Struktur CSS3 Animation :

img.digoyang:hover {
animation-name: digoyang;
-moz-animation-name:  digoyang ;
See also: Membuat Top Komentator pada Halaman Statis dan Komentar Blog

-webkit-animation-name:  digoyang;
animation-duration: 0.8s;
-moz-animation-duration: 0.8s;
-webkit-animation-duration: 0.8s;
transform-origin:50% 50%;
-moz-transform-origin:50% 50%;
-webkit-transform-origin:50% 50%;
animation-iteration-count: infinite;
-moz-animation-iteration-count: infinite;
-webkit-animation-iteration-count: infinite;
animation-timing-function: linear;
-moz-animation-timing-function: linear;
-webkit-animation-timing-function: linear;
}
See also: Memahami Logika CSS Media Queries agar Layout Blog Responsive!

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



Your Ads Here










Your Ads Here










70% { transform: translate(2px, 1px) rotate(-1deg); }
80% { transform: translate(-1px, -1px) rotate(1deg); }
90% { transform: translate(2px, 2px) rotate(0deg); }
100% { transform: translate(1px, -2px) rotate(-1deg); }
}
@-moz-keyframes  digoyang  {
See also: Writing the Resource Box so it Makes People click

0% { -moz-transform: translate(2px, 1px) rotate(0deg); }
10% { -moz-transform: translate(-1px, -2px) rotate(-1deg); }
20% { -moz-transform: translate(-3px, 0px) rotate(1deg); }
30% { -moz-transform: translate(0px, 2px) rotate(0deg); }
40% { -moz-transform: translate(1px, -1px) rotate(1deg); }
50% { -moz-transform: translate(-1px, 2px) rotate(-1deg); }
60% { -moz-transform: translate(-3px, 1px) rotate(0deg); }
70% { -moz-transform: translate(2px, 1px) rotate(-1deg); }
80% { -moz-transform: translate(-1px, -1px) rotate(1deg); }
90% { -moz-transform: translate(2px, 2px) rotate(0deg); }
100% { -moz-transform: translate(1px, -2px) rotate(-1deg); }
}
@-webkit-keyframes  digoyang  {
0% { -webkit-transform: translate(2px, 1px) rotate(0deg); }
See also: Kerangka Dasar Template Blogger HTML5 & SCHEMA

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

Catatan : Jika ada yang ingin ditanyakan silahkan tanyakan pada kolom komentar sesuai dengan apa yang dibahas pada halaman tutorial ini , terima kasih

Source code : http://blog.ridhomf.web.id/

Your Ads Here