Peut CSS3 transition taille de la police?

Comment peut-on faire de la taille de la police grossir au survol de la souris? Les transitions de couleurs fonctionnent bien dans le temps, mais la taille de la police passe aussitôt 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;
 }
InformationsquelleAutor Squirrl | 2012-02-16
  1. 84

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

    Votre font-size de transition est en train d'être remplacée par votre color de 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 la all mot-clé: transition: all 12s; - http://jsfiddle.net/thirtydot/6HCRs/1/).

    • bonne réponse, il bat le mien
    • +une pour l'utilisation du mot 'dagnabbit", en réponse à des op 'que dans tarnation" question 😛 #LanguageStyleMatching
    • C'était OPs progressive, quelqu'un l'a édité de sa question, et ce pour quelque raison que ce soit.
    • C'est un correct réponse. J'ai voté cela.
    • Je dirais de ne pas utiliser le all mot-clé pour la transition, pour des raisons de performances. Il peut rendre votre page horriblement lent. Opter pour la plus détaillée de la syntaxe: transition: color 12s, font-size 12s;
    • est-il un moyen de faire le même effet mais avec le background-color et background-clip propriétés? Je suis en train de le faire 🙂 et apprécierais si il y a déjà une solution pour cela.
    • Je recommande poser une nouvelle question si vous ne pouvez pas trouver une réponse. Assurez-vous d'inclure votre code, une démo, et une bonne explication de ce que vous essayez de faire.

    InformationsquelleAutor thirtydot
  2. 72

    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.

    • mauvaise réponse, il fonctionne, mais une taille de police n'est pas un "sous-propriété" de la police. la police de la propriété n'existe pas, c'est une abréviation de la propriété
    • Bon point, merci
    InformationsquelleAutor Artur Keyan
  3. 20

    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 une valeur différente en fonction de votre alignement du texte.

    InformationsquelleAutor Charlie
  4. 0

    JS Fiddle Démo

    Une alternative serait que vous pouvez également utiliser un framework comme jQuery 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;

}
    InformationsquelleAutor ROFLwTIME