问题
This is a funky one. And I'm sure it's webkit related since it only seems to be an issue in Chrome Version 20.0.1132.57 and Safari 5.1.7. I've uploaded a short video to explain the issue because it would be nearly impossible to explain via text.
Video: http://youtu.be/0XttO-Diz2g
Short version: During CSS3 animations, text that is inside a positioned element (absolute or relative) seems to change its antialiasing. It becomes bolder while animations are running.
Note: This is not the same as scaled elements becoming blurry diring an animation. (this issue)
Any thoughts, workarounds, etc?
回答1:
Update: My old answer below works but is only a hacky way to resolve the issue. Instead, read this for the reason to why other elements are affected: http://jsbin.com/efirip/5/quiet. In short: an animated element should be placed in its own stacking context by giving it a z-index.
Old answer:
It's WebKit related. Honestly I'm not sure why it does it and I assume it's a bug too. You can prevent it by adding any 3D related CSS3 declaration to any element on the page. Example:
body {
-webkit-transform: translateZ(0);
}
Or:
body {
-webkit-backface-visibility: hidden;
}
The presence of these declarations causes WebKit to use hardware acceleration for the animations which prevents the problem you've pointed out.
来源：https://stackoverflow.com/questions/11589985/webkit-text-aliasing-gets-weird-during-css3-animations