[Stackoverflow] CSS transition circle animation

https://stackoverflow.com/q/46705058/8554766

HTML

<div id='circle' class="stateOne paused" onclick=startTransition()></div>
<script>
var the_circle = document.getElementById('circle');
the_circle.addEventListener("transitionend", loopTransition);
</script>

CSS

#circle {
    top: 50%;
    left: 50%;
	  transform: translateX(-50%) translateY(-50%);
    position: absolute;
    width: 10%;
    padding-top: 10%;
    border-radius: 50%;
    transition: all 1s;
}


.stateOne {
    background: #800080;
    transform: scale(1.0001, 1.0001) translateX(-50%) translateY(-50%);
}

.stateTwo {
    background: #ffe6ff;
    transform: scale(2, 2) translateX(-50%) translateY(-50%);
}

.stateThree {
	  background: #ffe6ff;
    transform: scale(2.0001, 2.0001) translateX(-50%) translateY(-50%);
}

.stateFour {
	  background: #800080;
    transform: scale(1, 1) translateX(-50%) translateY(-50%);
}

JavaScript

function startTransition() {
  var the_circle = document.getElementById('circle');
  if (the_circle.className === 'stateOne paused') {
    the_circle.style.transitionDuration = 1;
    the_circle.className = 'stateTwo animated';
  } else {
    stopTransition();
  }
}

function stopTransition() {
  var the_circle = document.getElementById('circle');
  the_circle.style.transitionDuration = "0.5s"
  the_circle.className = "stateOne paused"
}

function loopTransition(e) {
	var the_circle = document.getElementById('circle');
  if (e.propertyName === "background") {
    if (the_circle.className.indexOf('paused') !== -1) {
			stopTransition()
    } else {
      if (the_circle.className === "stateTwo animated") {
      	the_circle.style.transitionDuration = "1s";
        the_circle.className = "stateThree animated"; 
      } else if (the_circle.className === "stateThree animated") {
        the_circle.style.transitionDuration = "1s";
        the_circle.className = "stateFour animated";
      } else if (the_circle.className === "stateFour animated") {
        the_circle.style.transitionDuration = "1s";
        the_circle.className = "stateOne animated";
      } else if (the_circle.className === "stateOne animated"){
        the_circle.style.transitionDuration = "1s";
        the_circle.className = "stateTwo animated";
      }
    }
  }
}