Puede CSS3 tamaño de fuente de transición?

¿Cómo se puede hacer que el tamaño de la fuente crezca con el ratón? Las transiciones de color funcionan bien con el tiempo, pero el tamaño de la fuente cambia inmediatamente por alguna razón.

Código de ejemplo: 

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;
 }
Author: Charlie, 2012-02-16
Source

4 answers

El color transita bien con el tiempo, pero la fuente cambia inmediatamente por alguna razón dagnabbit.

Su transición font-size está siendo sobrescrita por su transición color.

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

En su lugar, debe combinarlos todos en una declaración: 

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

Véase: 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;

(O simplemente usa la palabra clave all : transition: all 12s; - http://jsfiddle.net/thirtydot/6HCRs/1/).

 74
Author: thirtydot,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2012-02-16 13:04:19

Intente establecer la transición para todas las propiedades: 

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

También funciona.

O solo font: transition: font 0.3s ease.

 71
Author: Artur Keyan,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2016-10-14 12:40:05

Las transiciones para font-size parecen ir paso a paso por píxel y, por lo tanto, no son suaves.

Si es solo una línea, es posible que pueda usar transform: scale(.8). Escala hacia abajo y no hacia arriba para que no pierda calidad. Es probable que también necesite usar transform-origin: 0 0 o un valor diferente dependiendo de la alineación del texto.

 17
Author: Charlie,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2014-04-04 21:50:54

JS Fiddle Demo

Una alternativa sería que también puede usar un framework como jQuery Transit para hacer esto fácilmente por usted:

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
Author: ROFLwTIME,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2013-03-22 13:33:52