web-dev-qa-db-fra.com

CSS3 peut-il changer la taille de la police?

Comment peut-on agrandir la taille de la police en passant la souris? Les transitions de couleurs fonctionnent correctement dans le 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;
 }
htmlcsscss3css-transitions
65
Squirrl

La couleur change progressivement dans le temps, mais la police bascule immédiatement pour une raison quelconque.

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

84
thirtydot

Essayez de définir la 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;

c'est fonctionne aussi bien.

OU juste la police de caractères: transition: font 0.3s ease.

73
Artur Keyan

Les transitions pour font-size Semblent se faire pas à pas et ne sont donc pas fluides.

Si ce n'est qu'une ligne, vous pourrez peut-être utiliser transform: scale(.8). Réduisez et n'augmentez pas afin de ne pas perdre en qualité. Vous devrez probablement aussi utiliser transform-Origin: 0 0 Ou une valeur différente en fonction de l'alignement de votre texte.

22
Charlie

JS Fiddle Demo

Une alternative serait que vous puissiez également utiliser un framework tel que jQuery Transit pour le 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;

}
0
ROFLwTIME