JSFiddle - React, Tailwind, and code Playground
HTML
<div id="bg">
<img src='http://www.isomars.com/productpic/1a4c8780-13d2-4f50-a216-da089ee89bcc.jpg' class=''>
</div>
<br>
<br>
End at
<input type="text" class="pos"><button id="start">start</button>
CSS
#bg {
height: 500px;
width: 500px;
overflow:hidden;
}
#bg > img {
-webkit-transition: 2s;
-moz-transition: 2s;
}
#bg > img.animate {
-webkit-animation: spinIt 6s infinite linear;
-moz-animation: spinIt 6s infinite linear;
}
@-webkit-keyframes spinIt {
100% {
-webkit-transform: rotate(360deg);
}
}
@-moz-keyframes spinIt {
100% {
-webkit-transform: rotate(360deg);
}
}
JavaScript
$("#start").click(function () {
$("#bg > img").addClass('animate');
});