Trik Membuat Animasi Getar Tanpa iQuery

Dennis Ramdhani On Sabtu, 08 September 2012

Sobat ,maaf kalo trik ini sudah kuno atau jadul tapi menurut saya sobat blogger cobain dulu dech cara (Membuat Animasi Getar Tanpa jQuery) ini.Menurut saya keren kok...hehehe

Langsung berikut caranya :

1. Sobat Login Blogger

2. Pilih Rancangan,Lalu edit html

3. Sobat cari kode ]]></b:skin&gt;,,,kemudian letakkan kode berikut tepat diatas kode ]]></b:skin>

=====================BERIKUT KODENYA==============================

    /* 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); }
    }

=====================SELESAI==============================

Teks berwarna Merah adAlah kode css yang akan kita berikan efek animasi getaran, silahkan dirubah sesuai dengan css template sobat semua.

4. Langkah terakhir save template sobat.

Selamat Berkreasi Sobat