html - 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;
 }

最佳答案

您的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/)。