advertisement

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.

thumbnail
Judul: Trik Membuat Animasi Getar Tanpa jQuery™
Rating: 100% based on 99998 ratings. 5 user reviews.
Ditulis Oleh

Artikel Terkait Blogging :

0 comments:

Post a Comment

 
Copyright © 2013. http://caramuslim.blogspot.com proudly powered by Blogger
Template Seo Elite oleh Bamz