Javascript 如何让Chrome在FadeIn（）期间应用字体平滑？

我有一个大标题，我希望在页面加载后逐渐淡入。我使用下面的jQuery代码片段来实现这一点

$('#primary').fadeIn(1000);

但是，在过渡期间，在效果完成之前，Chrome似乎不会应用抗锯齿（或字体平滑）。这会在淡入结束并应用字体平滑后产生明显的抖动。IE、Firefox和Safari都可以正常工作

这是两者之间的区别

而这个

这可以在这里看到：

关于如何让Chrome在淡入时应用字体平滑，有什么想法吗

---

另外，我知道我可以禁用字体平滑。这消除了这种感觉，但是字体看起来很糟糕。

我试着在标题前加一个阴影，然后将其淡出，似乎效果不错

html：

<div id="container">
    <div id="shadow"></div>
    <h1 id="primary">This is a Title</h1>
</div>

---

这里有一个使用动画的CSS解决方案。注意，如果在Chrome中使用，则需要添加浏览器前缀

@keyframes fade-in {
    from {
        color: #fff;   
    }

    to {
        color: #000;
    }
}

#primary {
    font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
    font-size: 100px;
    animation: fade-in 1s linear;
}

---

令人惊叹的。非常感谢。作为警告，不要使用页脚来宣传您的网站。我正在移除所有这些。

@keyframes fade-in {
    from {
        color: #fff;   
    }

    to {
        color: #000;
    }
}

#primary {
    font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
    font-size: 100px;
    animation: fade-in 1s linear;
}