Animate text transform uppercase

Question

I'd like to have a transition to text-transform:uppercase when I mouse-over a link. I've tried:

a{
    font-size:20px;
animation-duration: 0.4s;
    transition: all 0.4s ease-in-out;
}

a:hover{
text-transform:uppercase;   
}

But that had no effect, it just pops to uppercase. Any ideas?

Answer 1

My guess is that there's no way to do a gradual transition on a style that has no intermediate values. For instance, you could change the width from 100px to 200px, because there are 99 intermediate values between the two. But what are the intermediate values between lowercase and uppercase (values you can set an element to at any time, like 150px or 170px in the width example)?

Maybe you could fake the transition a little by fading the text out (or halfway out), changing it to uppercase, and then fading the text back in (might require jQuery).