Kann CSS3 die Schriftgröße ändern?

Wie kann man die Schriftgröße mit der Maus vergrößern? Farbübergänge funktionieren im Laufe der Zeit einwandfrei, aber die Schriftgröße wechselt aus irgendeinem Grund sofort.

Beispielcode:

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

Die Farbübergänge gehen mit der Zeit gut über, aber die Schriftart wechselt aus irgendeinem Grund sofort.

Ihr font-sizeÜbergang wird durch Ihren colorÜbergang überschrieben .

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

Stattdessen müssen Sie alle zu einer Deklaration zusammenfassen:

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

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

(Oder verwenden Sie einfach das allSchlüsselwort: transition: all 12s;- http://jsfiddle.net/thirtydot/6HCRs/1/ ).

Versuchen Sie, den Übergang für alle Eigenschaften festzulegen:

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

es funktioniert auch.

ODER nur Schriftart : transition: font 0.3s ease.

Übergänge für font-sizescheinen pixelweise zu sein und sind daher nicht glatt.

Wenn es sich nur um eine Zeile handelt, können Sie diese möglicherweise verwenden transform: scale(.8). Skalieren Sie nach unten und nicht nach oben, damit Sie nicht an Qualität verlieren. transform-origin: 0 0Abhängig von Ihrer Textausrichtung müssen Sie wahrscheinlich auch einen anderen Wert verwenden.

JS Fiddle Demo

Eine Alternative wäre, dass Sie auch ein Framework wie jQuery Transit verwenden können , um dies einfach für Sie zu tun:

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;

}