css3 animation issue font rendering

问题:

I have a question for you. I'm currently working on text animation and i have a little problem with it. When I use properties like -webkit-transform my font goes from normal to thinner during the animation and goes back to normal when the animation is over.

Here is my code for the animation :

@-webkit-keyframes flipOne {
    0% {
        -webkit-transform: perspective(40000px) rotateY(0);
        -webkit-animation-timing-function: ease-out;
    }
    100% {
        -webkit-transform: perspective(40000px) rotateY(720deg);
        -webkit-animation-timing-function: ease-in;
    }
}

and here are the two pictures (before and during the animation)

Before :

After:

It's exactly the same settings for the fonts (before or during or after the animation)

Is that a rendering settings ? If yes, can you guys give me a little tips ?

Thanks in advance.

回答1:

This is probably related to the font-smoothing that Safari does, i.e. applying anti-aliasing to the text. My guess is that the smoothing is not applied while animating.

I'd reckon that setting the following will fix the problem:

-webkit-font-smoothing: none;

But it might also be a bit of a problem as it most likely will render the text pixelated all the time. I have no means to test this right now, sorry.

Adding something like

-webkit-font-smoothing: antialiased;

to the states you have might apply the smoothing correctly. Again, this is just guesses and there might not be a CSS3 based solution yet. In that case, you might wan't to apply the resizing to the container element (for example zoom) and use EM values on your font size. Make a responsive container.

If that doesn't help either, there is no other way but to apply some Javascript here.

回答2:

I met the similar issue and find the comments here. By adding this:

 -webkit-font-smoothing: antialiased;

seems to solve my problem in safari ( but screen's not a retina one ). But after checking this carefully, I found that the font seems a little more slim than what it looks like in other browsers. So I changed this to:

-webkit-font-smoothing: subpixel-antialiased;

and this solve my issue perfectly.

Leave a comment here in case that some one may meet the same issue.