JS .animate(） 在 Firefox/IE 中不起作用

所以我正在尝试为div设置动画，但我不确定我在这里做错了什么。以下代码在最新的Safari和Chrome上运行良好，但在Internet Explorer和Firefox上则不然。在火狐上，错误el.animate is not a function有什么建议/解决方案吗？

var slowMo = false;
var dur = slowMo ? 5000 : 500;
function $(id) {
  return document.getElementById(id);
}
var players = {};
var hue = 0;
function addTouch(e) {
  var el = document.createElement('div');
  el.classList.add('ripple');
  var color = 'hsl(' + (hue += 70) + ',100%,50%)';
  el.style.background = color;
  var trans = 'translate(' + e.pageX + 'px,' + e.pageY + 'px) '
  console.log(trans);
  var player = el.animate([{
    opacity: 0.5,
    transform: trans + "scale(0) "
  }, {
    opacity: 1.0,
    transform: trans + "scale(2) "
  }], {
    duration: dur
  });
  player.playbackRate = 0.1;
  players[e.identifier || 'mouse'] = player;
  document.body.appendChild(el);
  player.onfinish = function() {
    if (!document.querySelector('.ripple ~ .pad')) each(document.getElementsByClassName('pad'), function(e) {
      e.remove();
    });
    el.classList.remove('ripple');
    el.classList.add('pad');
  }
}
function dropTouch(e) {
  players[e.identifier || 'mouse'].playbackRate = 1;
}
function each(l, fn) {
  for (var i = 0; i < l.length; i++) {
    fn(l[i]);
  }
}
document.body.onmousedown = addTouch;
document.body.onmouseup = dropTouch;
document.body.ontouchstart = function(e) {
  e.preventDefault();
  each(e.changedTouches, addTouch);
};
document.body.ontouchend = function(e) {
  e.preventDefault();
  each(e.changedTouches, dropTouch);
};
var el = document.body;
function prevent(e) {
  e.preventDefault();
}
el.addEventListener("touchstart", prevent, false);
el.addEventListener("touchend", prevent, false);
el.addEventListener("touchcancel", prevent, false);
el.addEventListener("touchleave", prevent, false);
el.addEventListener("touchmove", prevent, false);

function fakeTouch() {
  var touch = {
    pageX: Math.random() * innerWidth,
    pageY: Math.random() * innerHeight,
    identifier: 'fake_' + Math.random() + '__fake'
  }
  addTouch(touch);
  var length = Math.random() * 1000 + 500;
  setTimeout(function() {
    dropTouch(touch);
  }, length)
  setTimeout(function() {
    fakeTouch();
  }, length - 100)
}
if (location.pathname.match(/fullcpgrid/i)) fakeTouch(); //demo in grid

.ripple {
  position: absolute;
  width: 100vmax;
  height: 100vmax;
  top: -50vmax;
  left: -50vmax;
  border-radius: 50%;
}
body {
  overflow: hidden;
}
.pad {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
}

<div class="pad"></div>

代码感谢凯尔