javascript Web Animations APIを使った波纹アニメーション（涟漪效应）参考：https：//qiita.com/shisama/items/c1cf3c52695ff17af

Posted 2021-05-04

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

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

animation.cancel()

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

animation.play()

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

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

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

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

animation.reverse()

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

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

animation.finish()

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

animation.pause()

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

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