动画文本转换大写答案

【问题标题】：Animate text transform uppercase动画文本转换大写
【发布时间】：2012-06-20 00:43:33
【问题描述】：

当我将鼠标悬停在链接上时，我希望转换为 text-transform:uppercase。我试过了：

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

a:hover{
text-transform:uppercase;   
}

但这没有任何效果，它只是弹出大写。有什么想法吗？

【问题讨论】：

标签： html css text

【解决方案1】：

我的猜测是，没有办法对没有中间值的样式进行渐变。例如，您可以将宽度从 100 像素更改为 200 像素，因为两者之间有 99 个中间值。但是小写和大写之间的中间值是什么（您可以随时将元素设置为的值，例如宽度示例中的 150px 或 170px）？

也许您可以通过淡出（或中途）文本，将其更改为大写，然后将文本淡入（可能需要 jQuery）来稍微伪造过渡。

【讨论】：

我很确定您对中间值是正确的。我还尝试通过增加 4px 的字体大小来伪造它，但这并不理想。好吧，回到文本阴影。
这是idea
@arttronics：我想这意味着使用 text-shadow 将小写文本模糊，将其更改为大写，然后再将其模糊。这是一个更好的主意，虽然 ie9 不支持文本阴影。

【解决方案2】：

我认为文本转换没有过渡。

【讨论】：