JSFiddle - React, Tailwind, and code Playground

by Serge Zahharenko

HTML

<div id="test"></div>

CSS

#test {width:200px;height:20px;margin:40px;background:red;}
#test.shake {
  -webkit-animation: shake .2s 2;
  animation: shake .2s 2;    
}
@-webkit-keyframes shake {
  0% {
    -webkit-transform: translateX(0);
    transform: translateX(0);
  }

  12.5% {
    -webkit-transform: translateX(-5px) rotateY(-5deg);
    transform: translateX(-5px) rotateY(-5deg);
  }

  37.5% {
    -webkit-transform: translateX(5px) rotateY(4deg);
    transform: translateX(5px) rotateY(4deg);
  }

  62.5% {
    -webkit-transform: translateX(-5px) rotateY(-2deg);
    transform: translateX(-5px) rotateY(-2deg);
  }

  87.5% {
    -webkit-transform: translateX(5px) rotateY(1deg);
    transform: translateX(5px) rotateY(1deg);
  }

  100% {
    -webkit-transform: translateX(0);
    transform: translateX(0);
  }
}

@-ms-keyframes shake {
  0% {
    -webkit-transform: translateX(0);
    transform: translateX(0);
  }

  12.5% {
    -webkit-transform: translateX(-5px) rotateY(-5deg);
    transform: translateX(-5px) rotateY(-5deg);
  }

  37.5% {
    -webkit-transform: translateX(5px) rotateY(4deg);
    transform: translateX(5px) rotateY(4deg);
  }

  62.5% {
    -webkit-transform: translateX(-5px) rotateY(-2deg);
    transform: translateX(-5px) rotateY(-2deg);
  }

  87.5% {
    -webkit-transform: translateX(5px) rotateY(1deg);
    transform: translateX(5px) rotateY(1deg);
  }

  100% {
    -webkit-transform: translateX(0);
    transform: translateX(0);
  }
}

@keyframes shake {
  0% {
    -webkit-transform: translateX(0);
    transform: translateX(0);
  }

  12.5% {
    -webkit-transform: translateX(-5px) rotateY(-5deg);
    transform: translateX(-5px) rotateY(-5deg);
  }

  37.5% {
    -webkit-transform: translateX(5px) rotateY(4deg);
    transform: translateX(5px) rotateY(4deg);
  }

  62.5% {
    -webkit-transform: translateX(-5px) rotateY(-2deg);
    transform: translateX(-5px) rotateY(-2deg);
  }

  87.5% {
    -webkit-transform: translateX(5px) rotateY(1deg);
    transform:...

JavaScript

$(document).ready(function(){
    setInterval(function(){
        $('#test').toggleClass('shake')
    },600)
})