Trik Membuat Animasi Getar Tanpa jQuery™

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.

Sumber : http://fatholthearseko.blogspot.com/2012/09/trik-membuat-animasi-getar-tanpa-jquery.html#ixzz2AIo45lBj

Share on Google Plus

About Unknown

This is a short description in the author block about the author. You edit it by entering text in the "Biographical Info" field in the user admin panel.