Efek Guncangan

<div class="guncangjarwo">Kode Jarwo</div>

.guncangjarwo{
    animation-name: guncangjarwo;
    animation-duration: .8s;
    transform-origin: 50% 50%;
    animation-iteration-count: infinite;
    animation-timing-function: linear;
}

@keyframes guncangjarwo {
    0% {
        transform: translate(4px, 2px) rotate(0)
    }
    10% {
        transform: translate(-2px, -4px) rotate(-1deg)
    }
    20% {
        transform: translate(-6px, 0) rotate(1deg)
    }
    30% {
        transform: translate(0, 4px) rotate(0)
    }
    40% {
        transform: translate(2px, -2px) rotate(1deg)
    }
    50% {
        transform: translate(-2px, 4px) rotate(-1deg)
    }
    60% {
        transform: translate(-6px, 2px) rotate(0)
    }
    70% {
        transform: translate(4px, 2px) rotate(-1deg)
    }
    80% {
        transform: translate(-2px, -2px) rotate(1deg)
    }
    90% {
        transform: translate(4px, 4px) rotate(0)
    }
    100% {
        transform: translate(2px, -4px) rotate(-1deg)
    }
}

// Code by https://blog.kodejarwo.com

Kode Jarwo