Web Animations APIを使った波紋アニメーション(ripple effect) ref: https://qiita.com/shisama/items/c1cf3c52695ff17aff48

file0.js

const el = document.querySelector(".pulsator");
const style = {
  width: "15px",
  height: "15px",
  borderRadius: "50%",
  borderColor: "red",
  background: "red",
  boxShadow: "0 0 0 rgba(255,0,0, 0.4)"
};
Object.assign(element.style, style);

file1.js

const el = document.querySelector(".pulsator");
const animation = el.animate(
  {
    boxShadow: ["0 0 0 0 rgba(255,0,0, 1)", "0 0 0 20px rgba(255,0,0, 0)"]
  },
  {
    duration: 1500,
    iterations: Infinity
  }
);

file10.js

animation.pause()

file11.js

el.onmouseover = function(event) {
  animation.pause();
};

file12.js

animation.finish()

file13.js

window.onkeydown = function(event) {
  if (event.key === "Escape") {
    animation.finish();
  }
};

file14.js

animation.onfinish = function() {
  alert("finished!");
}

file15.js

animation.reverse()

file16.js

window.onkeydown = function(event) {
  if (event.key === "Enter") {
    animation.reverse();
  }
};

file2.js

  {
    boxShadow: ["0 0 0 0 rgba(255,0,0, 1)", "0 0 0 20px rgba(255,0,0, 0)"],
    background: ["red", "pink"]
  },

file3.js

const animation = el.animate([
    {
      boxShadow: "0 0 0 0 rgba(255,0,0, 1)",
      background: "red"
    },
    {
      boxShadow: "0 0 0 20px rgba(255,0,0, 0)",
      background: "pink"
    }
  ],
  {
    duration: 1500,
    iterations: Infinity
  }
);

file4.js

const keyframes = new KeyframeEffect(
  el, 
  {
    boxShadow: ["0 0 0 0 rgba(255,0,0, 1)", "0 0 0 20px rgba(255,0,0, 0)"]
  },
  {
    duration: 1500,
    iterations: Infinity
  }
);

const animation = new Animation(keyframes, document.timeline);

file5.js

animation.play()

file6.js

document.querySelector(".some-button").addEventListener("click", function(event) {
  animation.play();
});

file7.js

animation.cancel()

file8.js

document.querySelector(".some-button").addEventListener("click", function(event) {
  animation.play();
  setTimeout(function () {
    animation.cancel();
  }, 5000);
});

file9.js

animation.oncancel = function() {
  alert("canceled!");
}