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;
}
158608 次浏览
小开

Try set transition for all properties:

-webkit-transition: all 0.3s ease;
-moz-transition: all 0.3s ease;
-o-transition: all 0.3s ease;
-ms-transition: all 0.3s ease;

it is works as well.

OR just font: transition: font 0.3s ease.

小开
最佳答案

The color transitions fine over time, but the font switches immediately for some dagnabbit reason.

Your font-size transition is being overwritten by your color transition.

transition: font-size 12s; /* transition is set to 'font-size 12s' */
transition: color 12s;     /* transition is set to 'color 12s' !! */

Instead, you must combine them all into one declaration:

transition: color 12s, font-size 12s;

See: 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;

(Or, just use the all keyword: transition: all 12s; - http://jsfiddle.net/thirtydot/6HCRs/1/).

小开

JS Fiddle Demo

An alternative would be that you can also use a framework such as jQuery Transit to do this easily for you:

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;


}
小开

Transitions for font-size seem to step by pixel and thus aren't smooth.

If it's just one line, you might be able to use transform: scale(.8). Scale down and not up so you don't lose quality. You will likely also need to use transform-origin: 0 0 or a different value depending on your text alignment.

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


提交答案