Kann CSS3 Übergangs Schriftgröße?

Question

Wie kann man die Schriftgröße auf der Maus größer werden lassen? Farbübergänge funktionieren im Laufe der Zeit gut, aber die Schriftgröße schaltet sofort aus irgendeinem Grund.

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

Answer 1

Die Farbe übergeht im Laufe der Zeit gut, aber die Schriftart schaltet sich aus einem Dagnabbit -Grund sofort um.

Dein font-size Der Übergang wird von Ihrem überschrieben color Überleitung.

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

Stattdessen müssen Sie sie alle zu einer Erklärung kombinieren:

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

Sehen: 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 benutzen Sie einfach das all Stichwort: transition: all 12s; - http://jsfiddle.net/thirtydot/6hcrs/1/).

Answer 2

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 ist auch funktioniert.

ODER nur Schriftart: transition: font 0.3s ease.

Answer 3

Übergänge für font-size scheinen von Pixel zu treten und sind somit nicht glatt.

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

Answer 4

JS Fiddle Demo

Eine Alternative wäre, dass Sie auch ein Framework verwenden können wie z. JQuery Transit Um dies leicht 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;

}