CSS3可以转换字体大小吗？

如何在鼠标悬停时使字体大小变大？随着时间的推移，颜色过渡效果很好，但是由于某种原因，字体大小会立即切换。

样例代码：

body p {
     font-size: 12px;
     color: #0F9;
     transition:font-size 12s;
     -moz-transition:font-size 12s; /* Firefox 4 */
     -webkit-transition:font-size 12s; /* Safari and Chrome */
     -o-transition:font-size 12s;
     transition:color 12s;
     -moz-transition:color 12s; /* Firefox 4 */
     -webkit-transition:color 12s; /* Safari and Chrome */
     -o-transition:color 12s;
}

 p:hover {
      font-size: 40px;
      color:#FC0;
 }

颜色会随着时间的推移而很好地过渡，但是由于某些dagnabbit的原因，字体会立即切换。

您的font-size过渡已被过渡覆盖color。

transition: font-size 12s; /* transition is set to 'font-size 12s' */
transition: color 12s;     /* transition is set to 'color 12s' !! */

相反，您必须将它们全部合并为一个声明：

transition: color 12s, font-size 12s;

请参阅： http ：//jsfiddle.net/thirtydot/6HCRs/

-webkit-transition: color 12s, font-size 12s;
   -moz-transition: color 12s, font-size 12s;
     -o-transition: color 12s, font-size 12s;
        transition: color 12s, font-size 12s;

（或者，只需使用all关键字：transition: all 12s;- http://jsfiddle.net/thirtydot/6HCRs/1/）。

尝试为所有属性设置过渡：

-webkit-transition: all 0.3s ease;
-moz-transition: all 0.3s ease;
-o-transition: all 0.3s ease;
-ms-transition: all 0.3s ease;

这也是可行的。

或者 只是字体：transition: font 0.3s ease。

的过渡font-size似乎一步一步地完成，因此并不流畅。

如果仅一行，则可以使用transform: scale(.8)。缩小而不放大，这样就不会失去质量。transform-origin: 0 0根据您的文本对齐方式，您可能还需要使用或不同的值。

JS小提琴演示

一种替代方法是，您还可以使用诸如jQuery Transit之类的框架轻松地为您完成此操作：

Javascript：

$("p").hover( function () {
    //On hover in
    $("p").transition({ 'color': '#FC0', 'font-size': '40px' }, 1000);    
}, function () {
    //On hover out
    $("p").transition({ 'color': '#0F9', 'font-size': '12px' }, 1000);
});

CSS：

p 
{

font-size: 12px;
color: #0F9;

}