CSS3可以过渡字体大小吗？

Question

怎样才能让鼠标上的字体大小变大？颜色过渡随着时间的推移工作正常,但字体大小由于某种原因立即切换.

示例代码:

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

Answer 1

随着时间的推移,颜色会很好地转换,但字体会立即切换到一些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/).

Answer 2

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

-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.

Answer 3

转换font-size似乎逐个像素,因此不平滑.

如果它只是一行,您可能可以使用transform: scale(.8).缩小而不是向上,这样你就不会失去质量.您可能还需要使用transform-origin: 0 0或使用不同的值,具体取决于您的文本对齐方式.