CSS动画跨浏览器兼容性

Question

我创建了一个CSS动画徽标，并在同一SVG文件中包含了所有动画代码，以便可以上载或引用该动画动画，而无需进行任何额外的工作即可播放动画。除了在Microsoft浏览器和iPhone（在Safari和chrome上测试）之外，它似乎都可以正常工作。在Internet Explorer上，动画几乎无法完全播放。在iOS平台上，动画会播放，但似乎有些指令被忽略或曲解。具体来说：

•应该使眨眼的比例指令似乎设置为不同的原点，使眼睛移动而不是按比例缩放。

•耳瓣没有“旋转”。实际上，它们在旋转，但是应该与其他元素一起移动，而只是在原地旋转。看来翻译说明已被忽略。

这是文件的链接。

https://clevergap.staging.wpengine.com/wp-content/uploads/2019/02/pet-friendly-logo-anim-01-3.svg

这是在iOS中无法正确显示的区域的CSS。

@keyframes eyes-anim {
  0% {transform: scale(1, 0) translate(0, 0); transform-origin: 50% 50%;}
  24% {transform: scale(1, 0) translate(0, -22.5%); transform-origin: 50% 27.5%;}
  26% {transform: scale(1, 1) translate(0, 0%); transform-origin: 50% 50%;}
  28% {transform: scale(1, 0) translate(0, -22.5%); transform-origin: 50% 27.5%;}
  30% {transform: scale(1, 1) translate(0, 0%); transform-origin: 50% 50%;}
  65% {transform: scale(1, 1) rotateZ(0deg); transform-origin: 50% 35%;}
  67% {transform: scale(1, 1) rotateZ(15deg); transform-origin: 50% 35%;}
  90% {transform: scale(1, 1) rotateZ(15deg); transform-origin: 50% 35%;}
  93% {transform: scale(1, 1) rotateZ(0deg); transform-origin: 50% 35%;}
  100% {transform: scale(1, 1) rotateZ(0deg); transform-origin: 50% 35%;}
}

@keyframes earlobe-right-anim {
  0% {transform: scale(0, 0) translate(0, 0); transform-origin: 65% 11.25%;}
  43% {transform: scale(0, 0) translate(0, 0); transform-origin: 65% 11.25%;}
  45% {transform: scale(1.1, 1.1) translate(0, 0); transform-origin: 65% 11.25%;}
  49% {transform: scale(.95, .95) translate(0, 0); transform-origin: 65% 11.25%;}
  53% {transform: scale(1, 1) translate(0, 0); transform-origin: 65% 11.25%;}
  65% {transform: scale(1, 1) translate(0, 0) rotateZ(0deg); transform-origin: 65% 11.25%;}
  67% {transform: scale(1, 1) translate(6%, 4.4%) rotateZ(-25deg); transform-origin: 65% 11.25%;}
  70% {transform: scale(1, 1) translate(6%, 4.4%) rotateZ(25deg); transform-origin: 65% 11.25%;}
  72% {transform: scale(1, 1) translate(6%, 4.4%) rotateZ(17deg); transform-origin: 65% 11.25%;}
  76% {transform: scale(1, 1) translate(6%, 4.4%) rotateZ(20deg); transform-origin: 65% 11.25%;}
  90% {transform: scale(1, 1) translate(6%, 4.4%) rotateZ(20deg); transform-origin: 65% 11.25%;}
  94% {transform: scale(1, 1) translate(0, 0) rotateZ(-10deg); transform-origin: 65% 11.25%;}
  97% {transform: scale(1, 1) translate(0, 0) rotateZ(5deg); transform-origin: 65% 11.25%;}
  100% {transform: scale(1, 1) translate(0, 0) rotateZ(0deg); transform-origin: 65% 11.25%;}  
}

@keyframes earlobe-left-anim {
  0% {transform: scale(0, 0) translate(0, 0); transform-origin: 35% 11.25%;}
  43% {transform: scale(0, 0) translate(0, 0); transform-origin: 35% 11.25%;}
  45% {transform: scale(1.1, 1.1) translate(0, 0); transform-origin: 35% 11.25%;}
  49% {transform: scale(.95, .95) translate(0, 0); transform-origin: 35% 11.25%;}
  53% {transform: scale(1, 1) translate(0, 0); transform-origin: 35% 11.25%;}
  65% {transform: scale(1, 1) translate(0, 0) rotateZ(0deg); transform-origin: 35% 11.25%;}
  67% {transform: scale(1, 1) translate(6%, -3%) rotateZ(25deg); transform-origin: 35% 11.25%;}
  72% {transform: scale(1, 1) translate(6%, -3%) rotateZ(-25deg); transform-origin: 35% 11.25%;}
  75% {transform: scale(1, 1) translate(6%, -3%) rotateZ(-17deg); transform-origin: 35% 11.25%;}
  77% {transform: scale(1, 1) translate(6%, -3%) rotateZ(-20deg); transform-origin: 35% 11.25%;}
  90% {transform: scale(1, 1) translate(6%, -3%) rotateZ(-20deg); transform-origin: 35% 11.25%;}
  93% {transform: scale(1, 1) translate(0, 0) rotateZ(10deg); transform-origin: 35% 11.25%;}
  96% {transform: scale(1, 1) translate(0, 0) rotateZ(-5deg); transform-origin: 35% 11.25%;}
  100% {transform: scale(1, 1) translate(0, 0) rotateZ(0deg); transform-origin: 35% 11.25%;}  
}

#Earlobe-Left path {
    animation-name: earlobe-left-anim;
    animation-duration: 7000ms;
    animation-timing-function: ease-in-out;
}
#Earlobe-Right path {
    animation-name: earlobe-right-anim;
    animation-duration: 7000ms;
    animation-timing-function: ease-in-out;
}

#Eyes circle, #Eyes ellipse, #Eyes path {
    animation-name: eyes-anim;
    animation-duration: 7000ms;
    animation-timing-function: ease-in-out;
}