CSS3可以转换字体大小吗？

如何使鼠标hover的字体变大？ 随着时间的推移，颜色转换工作正常，但由于某种原因，字体大小立即切换。

示例代码：

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转换正在被您的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或取决于文本alignment的不同值。

Answer 4

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