JSFiddle - React, Tailwind, and code Playground

by ian_smithz

HTML

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

CSS

bod{
  background:blue;
}

.box{
    width:50px; height:150px;
    background: yellow;
    border: 1px solid black;
    margin:100px;
    position: relative;
    float: left;
    -moz-transition:-moz-transform 1s ease-in-out
    -moz-transform-origin: center top;
    -webkit-transition:-webkit-transform 1s ease-in-out;
    -webkit-transform-origin:top;
}
@-moz-keyframes swing{
    0%{-moz-transform:rotate(-20deg)}
    50%{-moz-transform:rotate(20deg)}
    100%{-moz-transform:rotate(-20deg)}
}
@-webkit-keyframes swing{
    0%{-webkit-transform:rotate(-20deg)}
    50%{-webkit-transform:rotate(20deg)}
    100%{-webkit-transform:rotate(-20deg)}
}

JavaScript

(function swing() {
    var ang  = 20,
        dAng = 1,
        dir  = 1,
        box = document.getElementById("box");
    
    (function setAng(ang){
        box.style.webkitTransform =  'rotate('+ang+'deg)';
        dir = -dir;
        if (Math.abs(ang) > 0)
            setTimeout(setAng, 1000, dir * (Math.abs(ang)-dAng));
    })(ang);
})();