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

font-size 的过渡似乎是逐个像素的，因此并不平滑。

如果只有一行，您也许可以使用transform: scale(.8)。缩小而不是放大，这样你就不会失去质量。您可能还需要使用 transform-origin: 0 0 或其他值，具体取决于您的文本对齐方式。

#size ,#transform{
  height: 80px;
  position:absolute;
  animation-iteration-count: infinite;
  animation-duration: 3s;
  animation-direction: alternate;
}

#size {
  animation-name: size;
}

@keyframes size {
  from {
    font-size:10px;
    left:155px;
    top:40px;
  }

  to {
    font-size:80px;
    top:0;
    left:30px;
  }
}

#transform {
  animation-name: transform;
  transform-origin: center middle;
  font-size:80px;
  top:80px;
}

@keyframes transform {
  from {
    transform:scale(.1);
  }
  to {
    transform:scale(1);
  }
}

<div id=size>Font-size</div>
<div id=transform>Transform</div>

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

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;

}

Answer 4

随着时间的推移颜色过渡很好，但字体会切换 立即出于某种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/）。