比例和颜色的 CSS 动画一起导致字体像素化

Question

我通过添加一个类来触发font-icon 的css 动画。动画缩放图标从1到30，将color从#000改为#ff0000。

虽然它在 mozilla 中运行良好，但它会使图标缩放，就像它在 chrome、opera 和 safari 中的低质量 png 图像一样。无法检查 ie。

通过在::before伪元素中隔离彩色动画，可以在chrome和opera中修复。

但在 Safari 中，即使只是缩放动画也会将 font-icon 视为 png 图像。

随着动画完成，图标恢复其字体性质，像素化消失。

例子：

1. 仅适用于 Mozilla http://codepen.io/g1un/pen/Kgrpjq
   
2. 适用于 Mozilla、Chrome、Opera http://codepen.io/g1un/pen/BLzoWp
   

代码，只能在 Mozilla 中正常工作：

<div>
  <h1></h1> 
</div>

div {
  display: flex;
  justify-content: center;
  height: 100vh;
  align-items: center;
}

h1 {
  position: relative;

  font-size: 34px;

  cursor: pointer;
}

h1::before {
  content: 'A';
}

h1.anima {
  animation: anima;
  -webkit-animation: anima;
  animation-duration: 3s;
  -webkit-animation-duration: 3s;
  animation-fill-mode: forwards;
  -webkit-animation-fill-mode: forwards;
}

@-webkit-keyframes anima {
  0% {
      transform: scale(1);
      color: #000;
    }
    100% {
      transform: scale(30);
      color: #ff0000;
    }
}

@keyframes anima {
  0% {
      transform: scale(1);
      color: #000;
    }
    100% {
      transform: scale(30);
      color: #ff0000;
    }
}

$('h1').on('click', function(){
  $(this).addClass('anima');
  var _this = $(this);
  setTimeout(function(){
    _this.removeClass('anima');
  }, 5000);
});

CSS 变化，对 chrome 和 opera 有帮助：

h1.anima::before {
  animation: anima-before;
  -webkit-animation: anima-before;
  animation-duration: 3s;
  -webkit-animation-duration: 3s;
  animation-fill-mode: forwards;
  -webkit-animation-fill-mode: forwards;
}

@-webkit-keyframes anima {
  0% {
      transform: scale(1);
    }
    100% {
      transform: scale(30);
    }
}

@keyframes anima {
  0% {
      transform: scale(1);
    }
    100% {
      transform: scale(30);
    }
}

@keyframes anima-before {
  0% {
      color: #000;
    }
    100% {
      color: #ff0000;
    }
}

@-webkit-keyframes anima-before {
  0% {
      color: #000;
    }
    100% {
      color: #ff0000;
    }
}

有没有人知道更好的方法来制作 chrome 和 opera 动画而无需伪元素破解？谁知道 safari 出了什么问题，以及如何修复像素化缩放？

更新：
正如@ZBerg 在他的评论中提到的那样：“字体平滑选项具有广泛的支持变体。如果某些东西影响了您的桌面配置文件，它可能会产生连锁反应（谷歌 - 屏幕字体的平滑边缘）”。
考虑到我对 chrome 没有更多问题（但确实有它，正如您通过屏幕截图看到的那样，在评论中链接），确实影响了我的桌面（但我不能在谷歌上确切地了解平滑问题而缩放）。
总的来说，我想我的问题的完整答案必须包括：

• 野生动物园的决定（或解释它有什么问题）；
• （可选）解释 chrome 出了什么问题。

在解释下，我的意思是链接到问题报告或关于 chrome 重现错误的方式。

Answer 1

对我有用的一个解决方案是缩放父级，在这种情况下为“div”，并​​在他身上进行缩放。 CSS

div.anima {
 animation: anima;
 -webkit-animation: anima;
 animation-duration: 3s;
 -webkit-animation-duration: 3s;
 animation-fill-mode: forwards;
 -webkit-animation-fill-mode: forwards;
}

JS：

$('div').on('click', function(){

如下： updated