Blog yang berisi segala informasi terbaru yang anda butuhkan...

Advertisement

Trik Membuat Animasi Getar Tanpa jQuery™

ADSENSE HERE!



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.

ADSENSE HERE!

No comments:

Post a Comment

iklan

iklan

iklan

Copyright © Ditentukan Blog. All rights reserved. Template by CB. Theme Framework: Responsive Design