Is there a fluent transition possibility for animation font-size in Raphael JS?

Question

So far it seems like it is not fluent, but choppy. E.g. if you have one state attribute with font-size: 14 and want to animate to state with font-size: 16, the

Answer 1

That is a known problem and has nothing to do with Raphael but with sub-pixel rendering:

When viewed in browsers that do not support GPU-powered sub-pixel positioning, the text appears to jump because the text needs to be created using the CPU and the positions of each letter are rounded to the nearest whole pixel.

Even though it's possible with the new CSS 3 animations you can see it's just upscaling the font until the animation is finished and then it's redrawn.

I am sorry that I don't have solution for you, but I haven't seen a smooth cross-browser font size animation with CSS until now.

---

But what you can do to disguise this effect a bit, is to reduce the animation interval time and widen the gap of the font-sizes. The steps are then appearing in a faster time frame and one can't see the single steps.

See this fiddle