在两种不同的字体大小之间应用CSS转换时,生成的动画在Firefox中很流畅,但在Chrome中却非常不稳定。
div {
font-size: 87.5%;
padding: .5em;
margin: .5em;
transition: font-size .25s ease-in-out .25s,
padding .25s ease-in-out .25s,
margin .25s ease-in-out .25s;
}
div:hover {
font-size: 100%;
}
现场演示: http://jsfiddle.net/B7Zyp/2/(将鼠标悬停在蓝色边框上方)
为什么?有没有办法让Chrome中的动画流畅?
答案 0 :(得分:6)
Chrome目前不在Windows上使用DirectWrite进行字体渲染。文本没有消除锯齿,因此字体大小被舍入(到最接近的整数?)。
他们正在研究它。请参阅相关错误故障单上的this comment,尤其是附件:
如果使用正确的标志启用DirectWrite,它应该平滑地动画。