Jiggle effect using CSS

by Sunny Mody

HTML

<div>Click on the icon to start/stop jiggling !!!</div>

<img class="click-to-jiggle jiggle" src="https://lh4.googleusercontent.com/wiD5Oxak2lCtgVJDGApEpqPj9PHPOiggGl9UrqtBpQ=s207-p-no">
<img class="click-to-jiggle " src="https://lh6.googleusercontent.com/T05IsOJOYbSa5Ec7iiXs_F0WlqC1xYIOe_DEHYNBRg=s207-p-no">
<img class="click-to-jiggle jiggle" src="https://lh5.googleusercontent.com/NoOjzeMTNLaFhN6gK9f5LO4NK5KuLwmU8J9Duyk74A=s207-p-no">
<img class="click-to-jiggle " src="https://lh3.googleusercontent.com/UfgeoUgx2X-a18qCPnpPGYSnrutCMd6ja3Pnjo7-mQ=s207-p-no">
<img class="click-to-jiggle jiggle" src="https://lh3.googleusercontent.com/KqQZhVN7f2-5nIvk-eqaj5FeNsej_RgH5twlymcgLQ=s207-p-no">

CSS

img {
    height: 64px;
    width: 64px;
}

.jiggle {
    -webkit-animation: jiggle 0.2s infinite;
    -moz-animation-duration: 0.2s;
    -moz-animation-name: jiggle;
    -moz-animation-iteration-count: infinite;
    -webkit-transform: rotate(-3deg);
    -moz-transform: rotate(-3deg);
}

@-moz-keyframes jiggle {
    0% {
        -moz-transform: rotate(-1deg);
    }
    50% {
        -moz-transform: rotate(1deg);
    }
}

@-webkit-keyframes jiggle {
    0% {
        -webkit-transform: rotate(-1deg);
        }
    50% {
        -webkit-transform: rotate(1deg);
    }
}

JavaScript

$(function () { $('.click-to-jiggle').click(function (e) {  $(this).toggleClass('jiggle');  
        return false; 
    });
});