[css3-animations] Applying an animation to text wrapped in spans

I apologise if I've been asking for too much help recently, but I thought
to myself who better to ask questions than the WG especially when few on
the interent even attempt to solve these issues.

Anyway, I'm trying to apply an animation on click. I'm handling the click
event with jQuery, which add a class that the animation is applied to.

The class addition works fine, but the animation doesn't happen.

At first I thought it was because the spans are inline, but setting them to
inline-block doesn't solve the issue.

Does anyone have any idea why this animation is not taking place when
applied to text wrapped in spans?

Here is a JSFiddle recreating the problem:
http://jsfiddle.net/3Ld8e/1/<http://jsfiddle.net/3Ld8e/1/>

Thanks in Advance,
Irfan Mir