Web Animations API

by niklas_den

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;
}

.stop {
    animation-play-state: paused;
    -webkit-animation-play-state: paused; 
}

.turn-right {
  -webkit-animation: cw 7s infinite linear;
}

@-webkit-keyframes cw {
  from {
    -webkit-transform: rotate(0deg);
  }

  to {
    -webkit-transform: rotate(360deg);
  }
}

.turn-left {
  -webkit-animation: ccw 7s infinite linear;
}

@-webkit-keyframes ccw {
  from {
    -webkit-transform: rotate(0deg);
  }

  to {
    -webkit-transform: rotate(-360deg);
  }
}

JavaScript

// 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);

const targetElement = document.getElementById("fan");

function clockwise() {
	targetElement.style.animationPlayState='paused';
  targetElement.className = "turn-right";
  targetElement.style.animationPlayState='running';
}

function counterclockwise() {
	targetElement.style.animationPlayState='paused';
  targetElement.className = "turn-left";
  targetElement.style.animationPlayState='running';
}

function stop() {
  targetElement.style.animationPlayState='paused';
  targetElement.style.webkitAnimationPlayState='paused';
}