Question

I want to animate some text in a slow and subtle way. jQuery animations work with integer values, so if you want to animate a size over say 10px in two seconds, you see a series of small steps at five FPS which looks jerky.

Here’s a jsFiddle that shows what I’m talking about.

I found a similar question about animating positions, but the top/left/etc properties are integral, and so the accepted answer says it’s not possible. However font-size can be animated as a real number, if jQuery will spit real numbers out.

I will also want to chain together a series of such animations.

Any ideas?

Answer 1

Another option would be direct manipulations css transformations – here’s an example (I only included webkit css to make it readable, but similar functions exist in all modern browsers). The “ease-out” property includes the fast-then-slow functionality you were aiming for. It’s certainly smoother than what you’ve been able to get so far, but it’s quite blurry – not sure if it’s a trade-off you’d want to make. And as it’s an experimental property, you’d still probably want your existing jQuery animation as a fallback for older browsers.