Может ли размер шрифта перехода CSS3?

Как можно увеличить размер шрифта на мыши? Цветовые переходы отлично работают со временем, но размер шрифта сразу же по какой-то причине переключается.

Пример кода:

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

Ответы

Ответ 1

Переходы цвета прекрасны с течением времени, но переключатели шрифтов немедленно для некоторой причины dagnabbit.

Ваш переход font-size будет перезаписан вашим переходом color.

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

Вместо этого вы должны объединить их все в одно объявление:

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

Смотрите: 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;

(Или просто используйте ключевое слово all: transition: all 12s; - http://jsfiddle.net/thirtydot/6HCRs/1/).

Ответ 2

Попробуйте установить переход для всех свойств:

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

он работает.

ИЛИ просто шрифт: transition: font 0.3s ease.

Ответ 3

Переходы для font-size кажутся шаг за шагом и, следовательно, не являются гладкими.

Если это только одна строка, вы можете использовать transform: scale(.8). Уменьшите масштаб, а не вверх, чтобы не потерять качество. Вероятно, вам также потребуется использовать transform-origin: 0 0 или другое значение в зависимости от вашего выравнивания текста.

Ответ 4

JS Fiddle Demo

Альтернативой могло бы быть то, что вы также можете использовать фреймворк, такой как jQuery Transit, чтобы сделать это легко для вас:

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;

}