CSS動畫的縮放和顏色一起導致字體像素化

Question

我點火cssfont-icon的動畫通過添加一個類來實現。動畫縮放圖標從1到30，並將color從#000更改爲#ff0000。

雖然它在Mozilla中運行良好，但它會使圖標變得像在Chrome，Opera和Safari中是低質量的png圖像。無法檢查即。

它可以通過在::before僞元素中隔離彩色動畫來修復鉻和歌劇。

但在safari甚至只是規模動畫單獨對待font-icon像PNG圖像。

動畫完成後，圖標恢復其字體性質，並且像素消失。

例子：

1. 只能在Mozilla http://codepen.io/g1un/pen/Kgrpjq
   
2. 在Mozilla，鉻，歌劇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正常動畫沒有pseudoelement破解？誰知道safari出了什麼問題，以及如何修復像素化縮放？

UPDATE：
作爲@ZBerg在他的評論中提到：「平滑字體選項有廣泛的陣列支持一些變體如果事情已經影響到你的桌面配置文件也可能對影響敲門聲（谷歌 - 的邊緣光滑屏幕字體）「。
考慮到，我沒有更多的鉻問題（但真的如你所見，通過截圖，鏈接評論），真的影響了我的桌面（但我不能谷歌smth完全關於平滑問題同時縮放）。
整體上，我想這充分回答我的問題必須包括：

• Safari的決定（或解釋什麼是錯的）;
• （可選）解釋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