Web Animations API

HTML

<div id="fan"></div>

<div id="cw">clockwise</div>
<div id="ccw">counter-clockwise</div>
<div id="stop">stop</div>

CSS

#fan {
  width: 150px;
  height: 150px;
  background-color: red;
  left: 50%;
  position: absolute;
  top: 50%;
}

#fan div {
  border: 1px solid black;
  margin-left: -50%;
  margin-top: -50%;
}

#cw,
#ccw,
#stop {
  background-color: light-blue;
  border: 1px solid black;
  width: 200px;
  height: 50px;
}

JavaScript

var fan = document.getElementById('fan');

var cw = new KeyframeEffect(
  fan, [{
      transform: "rotate(0)"
    },
    {
      transform: "rotate(360deg)",
    }
  ], {
    // timing options
    duration: 8000,
    iterations: Infinity,
  });

// Creates new Animation object and starts it in clockwise rotation
// NOTE(BB): No need for document.timeline, it's the default.
var fananim = new Animation(cw/*, document.timeline*/);

// Stops Animation so it doesnt run automatically
// NOTE(BB): It only runs automatically if you use Element.animate()
// fananim.pause();

var clockwise = function() {
 cw.setKeyframes(
    [{
        transform: "rotate(0)"
      },
      {
        transform: "rotate(360deg)",
      }
    ]
  );
  fananim.play();
}

var counterclockwise = function() {
  cw.setKeyframes(
    [{
        transform: "rotate(0)"
      },
      {
        transform: "rotate(-360deg)",
      }
    ]
  );
  fananim.play();
}


var stop = function() {
  fananim.pause();
}

// Click Handlers for Buttons on Control Baord
var ela = document.getElementById("cw");
ela.addEventListener("click", clockwise, false);

var elb = document.getElementById("ccw");
elb.addEventListener("click", counterclockwise, false);

var elc = document.getElementById("stop");
elc.addEventListener("click", stop, false);