JSFiddle - React, Tailwind, and code Playground

by jakie8

HTML

<img id="target" src="http://placehold.it/300x300">

CSS

body{
    padding:50px;
    text-align:center;
}




@-webkit-keyframes wiggle {
    0%     {-webkit-transform: rotate3d(0,0,0,0deg) scale(1)}
    10%     {-webkit-transform: rotate3d(0,0,0,-1deg) scale(1) }
    20%     {-webkit-transform: rotate3d(0,0,0,-2deg) scale(1.01) }
    30%     {-webkit-transform: rotate3d(0,0,0,-1deg) scale(1.02)}
    40%     {-webkit-transform: rotate3d(0,0,0,0deg) scale(1.03)}
    50%     {-webkit-transform: rotate3d(0,0,0,1deg) scale(1.04) }
    60%     {-webkit-transform: rotate3d(0,0,0,2deg) scale(1.03) }
    70%     {-webkit-transform: rotate3d(0,0,0,1deg) scale(1.02)}
    80%     {-webkit-transform: rotate3d(0,0,0,0deg) scale(1.01) }
    90%     {-webkit-transform: rotate3d(0,0,0,-1deg) scale(1)}
    100%     {-webkit-transform: rotate3d(0,0,0,-2deg) scale(1)}
}

@-webkit-keyframes wiggleold {
    0%     {-webkit-transform: rotate3d(0,0,0,0deg) scale(1)}
    25%     {-webkit-transform: rotate3d(0,0,0,5deg) scale(1.02)}
    75%     {-webkit-transform: rotate3d(0,0,0,-5deg) scale(1.02)}
    100%     {-webkit-transform: rotate3d(0,0,0,0deg) scale(1)}
}
 
.wiggle {
    -webkit-animation: wiggle .2s infinite alternate;
  -moz-animation: wiggle .2s ease-in-out alternate;
  -ms-animation: wiggle .2s ease-in-out alternate
}

.pulse {
  -webkit-animation-duration: 180ms;
  -webkit-animation-iteration-count: 1;
  -webkit-animation-name: pulse;
  -webkit-animation-timing-function: ease-in-out;
}

JavaScript

function pulse(target){
    $(target).addClass('pulse');
    setTimeout(function(){
        $(target).removeClass('pulse');   
    }, 880);
}

function wiggle(target){
    $(target).addClass('wiggle');
    setTimeout(function(){
        $(target).removeClass('wiggle');   
    }, 300);
}


$('body').on('click', function(){
    wiggle('#target');
});