JSFiddle - React, Tailwind, and code Playground

by NicoO

HTML

<button>Spin!</button>
<button>Dont stop!</button>
<button>Ok, stop.</button>
<img src="http://www.placehold.it/150x150x" id="logo" />

CSS

#logo
{
    border-radius(100px);
    display: block;
}

#logo.spinOnce
{
     -webkit-animation: rotate 3.6s 1 linear;
    animation: rotate 3.6s 1 linear;
}

#logo.spin
{
     -webkit-animation: rotate 3.6s infinite linear;
    animation: rotate 3.6s infinite linear;
}

@-webkit-keyframes rotate {
  0%   { transform: rotate(0) }
  100% { transform: rotate(360deg) }
}

@keyframes rotate {
  0%   { transform: rotate(0) }
  100% { transform: rotate(360deg) }
}

JavaScript

var logo = document.getElementById("logo");
var buttons = document.getElementsByTagName("button");

buttons[0].addEventListener("click", function(){
    logo.classList.remove("spin");
    logo.classList.add("spinOnce");
});

buttons[1].addEventListener("click", function(){
    logo.classList.remove("spinOnce");
    logo.classList.add("spin");
});

buttons[2].addEventListener("click", function(){
    logo.classList.remove("spinOnce");
    logo.classList.remove("spin");
});