Membuat Animasi Getaran Tanpa jQuery Bag.2

Hallo Sobat Blogger!

Kali ini ut2a-4down ingin berbagi ilmu mengenai 'blogger' yaitu cara (Membuat Animasi Getar Tanpa jQuery). dimana pada postingan saya yang sebelumnya 'Membuat Gambar Bergetar With jQuery'. disini kita sudah dapat membedakannya, bahwa animasi getar ini hanya mememakai keyframes. sehingga dengan mudah untuk menciptakan animasi getar ini. baiklah kita langsung mulai ajj yah. :D

1. Login blogger.
2. Rancangan, Edit Html, Cari kode ]]></b:skin>
3. Dan Letakkan kode berikut diatasnya :

/* Animasi Getar akautta */
.sidebar h2, .tabview h2, .post-title {
animation-name: getar-ut;
-moz-animation-name: getar-ut;
-webkit-animation-name: getar-ut;
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;
}
@keyframes getar-ut {
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); }
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 getar-ut {
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 getar-ut {
0% { -webkit-transform: translate(2px, 1px) rotate(0deg); }
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); }
}

KET::

Teks berwarna HIJAU adlah kode css yang akan kita berikan efek animasi getaran, silahkan dirubah sesuai dengan css template anda.

4. Langkah terakhir save template.

Dan lihat hasilnya.

Dangdutan Yukkz..!

Mungkin cukup sekian  Membuat Animasi Getaran Tanpa jQuery Bag.2. jika ada yang perlu ditanyakan silahkan tinggalkan komentar sobat dikolom yang tersedia. mksih slmat berkreasi. :D