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

颜色随时间过渡很好，但字体会切换立即为一些dabnabbit的原因。

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或不同的值，具体取决于您的文字对齐方式。

Answer 4

JS Fiddle Demo

另一种方法是您也可以使用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;

}

CSS3可以过渡字体大小吗？

4 个答案:

JS Fiddle Demo