Peut CSS3 transition taille de la police? Ce qui, dans tarnation je fais mal?

Question

Donc, je suis simplement en train d'essayer de faire de mon de police grossir avec une souris au-dessus. J'ai essayé de transition, de transformation en chrome et firefox. Les transitions de couleur amende au fil du temps, mais la police passe aussitôt pour une raison quelconque.

Voici mon code:

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

Les transitions de couleur amende au fil du temps, mais la police les commutateurs immédiatement pour une dagnabbit raison.

Votre font-size transition est en train d'être remplacée par votre color transition.

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

Au lieu de cela, vous devez les combiner en une seule déclaration:

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

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

(Ou, il suffit d'utiliser l' all mot-clé: transition: all 12s; - http://jsfiddle.net/thirtydot/6HCRs/1/).

Answer 2

Essayez jeu de transition pour toutes les propriétés:

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

il fonctionne aussi bien.

OU juste de police: transition: font 0.3s ease. Parce qu' font-size est une sous-propriété de l' font il ne peut pas être utilisé indépendamment ici.

Answer 3

Les Transitions pour font-size semblent étape par pixel et ne sont donc pas lisse.

Si c'est juste une ligne, vous pourriez être en mesure d'utiliser transform: scale(.8). L'échelle vers le bas et non vers le haut afin de ne pas perdre en qualité. Vous aurez probablement aussi besoin d'utiliser transform-origin: 0 0 ou d'une valeur différente en fonction de votre alignement du texte.

Answer 4

JS Fiddle Démo

Une alternative serait que vous pouvez également utiliser un framework comme jQuery de Transit pour ce faire facilement pour vous:

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;

}