La taille de la police de transition CSS3 peut-elle être définie?

Comment peut-on agrandir la taille de la police avec la souris? Les transitions de couleur fonctionnent correctement au fil du temps, mais la taille de la police change immédiatement pour une raison quelconque.

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

La couleur se transforme bien au fil du temps, mais la police change immédiatement pour des raisons de dagnabbit.

Votre transition de font-size est écrasée par votre transition de color .

 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 tous 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 utilisez simplement le mot-clé all : transition: all 12s;http://jsfiddle.net/thirtydot/6HCRs/1/ ).

Essayez la transition de set 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; 

ça marche aussi.

OU juste police: transition: font 0.3s ease .

Les transitions pour font-size de la font-size semblent pas à pas et ne sont donc pas régulières.

S’il ne s’agit que d’une ligne, vous pouvez utiliser transform: scale(.8) . Réduisez et ne montez pas pour ne pas perdre en qualité. Vous devrez probablement également utiliser transform-origin: 0 0 ou une valeur différente en fonction de l’alignement de votre texte.

JS Fiddle Demo

Une alternative serait que vous puissiez également utiliser un framework tel que jQuery Transit pour le faire facilement:

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