[Stackoverflow] CSS keyframe circle animation

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

HTML

<body  onload=setAnimationDuration(1,1)>
<div id="circle" class='circle-paused' onclick=cssAnimation()></div>
</body>

CSS

#circle {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translateX(-50%) translateY(-50%);
}

.circle-paused {
    width: 9%;
    padding-top: 9%;
    border-radius: 50%;
    background-color: #800080;
    margin: auto;
}

.circle-animated {
    /* 2 sec pause 4 sec expand_shrink*/
    width: 9%;
    padding-top: 9%;
    -webkit-animation-name: my-circle; /* Safari 4.0 - 8.0 */
    -webkit-animation-duration: 12s; /* Safari 4.0 - 8.0 */
    animation-name: my-circle;
    animation-duration: 12s;
    animation-iteration-count: infinite;
    animation-timing-function: linear;
    border-radius: 50%;
    margin: auto;
}

@keyframes my-circle {
    0% {background-color: #800080; width: 9%; padding-top: 9%;}
    33.3% {background-color: #D8BFD8; width: 28%; padding-top: 28%;}
    50% {background-color: #D8BFD8; width: 28%; padding-top: 28%;}
    83.3% {background-color: #800080; width: 9%; padding-top: 9%;}
    100% {background-color: #800080; width: 9%; padding-top: 9%;}
}

JavaScript

function cssAnimation() {
  if (document.getElementById('circle').className == 'circle-paused') {
      document.getElementById('circle').className = 'circle-animated'
  } else {
      document.getElementById('circle').className = 'circle-paused'
  }
}

function findKeyframes(animation_name) {
  // get list of current keyframe rules
  var style_sheet = document.styleSheets;
  for (var i = 0; i < style_sheet.length; ++i) {
      for (var j = 0; j < style_sheet[i].cssRules.length; ++j) {
          // type 7 correspond to CSSRule.KEYFRAMES_RULE, for more info see https://developer.mozilla.org/en-US/docs/Web/API/CSSRule 
          if (style_sheet[i].cssRules[j].type == 7 && style_sheet[i].cssRules[j].name == animation_name) {
              return style_sheet[i].cssRules[j];
          }
      }
  }
  // keyframe rules were not found for given animation_name
  return null;
}

function getPercentage(total, fraction) {
  // Returns what percentage the fraction is from total
  // The result is rounded to 1 decimal place
  return Math.round(((100 / total) * fraction) * 10) / 10;
}

function setAnimationDuration(pause, expand_shrink) {

  var total_animation_duration = (pause * 2) + (expand_shrink * 2)
  var pause_percentage = getPercentage(total_animation_duration, pause)
  var expand_shrink_percentage = getPercentage(total_animation_duration, expand_shrink)

  var pause1 = pause_percentage + expand_shrink_percentage;
  var shrink = pause1 + expand_shrink_percentage;

  var frame_percentage_list = [0, expand_shrink_percentage, pause1, shrink, 100]

  var key_frame_list = findKeyframes('my-circle')
  var new_rule_list = []
  var to_be_removed_key_list = []

  //create array of new rules to be inserted
  //collecting old keys of rules to be deleted
  for(var i = 0; i < key_frame_list.cssRules.length; i++) {
    var current_rule = key_frame_list.cssRules[i].cssText
    
    to_be_removed_key_list.push(key_frame_list.cssRules[i].keyText)
   ...