web-dev-qa-db-ja.com

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;
 }
htmlcsscss3css-transitions
65
Squirrl

色は時間の経過とともに正常に遷移しますが、何らかの理由でフォントがすぐに切り替わります。

font-sizeトランジションは、colorトランジションによって上書きされています。

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

代わりに、すべてを1つの宣言に結合する必要があります。

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/ ）。

84
thirtydot

すべてのプロパティの遷移を設定してみてください。

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

73
Artur Keyan

font-sizeのトランジションはピクセルごとにステップするように見えるため、スムーズではありません。

1行だけの場合は、transform: scale(.8)を使用できる場合があります。品質を落とさないように、スケールアップとスケールダウンはしません。また、テキストの配置に応じて、transform-Origin: 0 0または異なる値を使用する必要があります。

22
Charlie

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;

}
0
ROFLwTIME