跨瀏覽器動畫反鋸齒

Question

我正在嘗試製作一個稍微變寬並且回退的小條。動畫涉及它從4px擴大到8px並返回。在Chrome中，此動畫是反鋸齒的，但在Firefox和IE中則不是。我通過爲元素提供背景顏色的1px邊框來讓它在Firefox中工作，但在IE和Chrome中無法使用。

小提琴：黑色http://jsfiddle.net/qAGL8/

@keyframes myAnimation { 
    0%, 100% { transform: scaleX(1); } 
    50% { transform: scaleX(2); } 
} 

.thing { 
    width: 4px; 
    height: 50px; 
    background: white; 
    animation: myAnimation 4s infinite ease-in-out; 
} 

白條，這是它在Chrome瀏覽器antialiases（注意是灰色）：

其他瀏覽器只是做全像素。那麼，基本上，是否有任何方法可以在所有瀏覽器中正確獲得抗鋸齒功能？

Answer 1

如果你.thing元素上添加透明的輪廓，動畫更流暢，即使在Firefox

outline: 1px transparent solid; 

例子：http://jsfiddle.net/Bf99F/