"No" animation

by Felipe Alfaro

HTML

<div id="box"></div>

CSS

@keyframes negation{
    0%{
        transform: translateX(0px);
    }
    25%{
        transform: translateX(-15px);
    }
    50%{
        transform: translateX(15px);
    }
    75%{
        transform: translateX(-15px);
    }
    100%{
        transform: translateX(0px);
    }
}
div{
    display: block;
    background: gray;
    width: 100px;
    height: 100px;
    margin: 15px auto;
}
.negation{
    animation: negation .2s 1;
}

JavaScript

(function(doc){

	doc.getElementById('box').onclick = function(){

    	doc.getElementById('box').classList.remove('negation');
        setTimeout(function(){
        	doc.getElementById('box').classList.add('negation');
        },100);
        
    };

})(document);