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

Question

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

Образец кода:

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

Answer 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/).

Answer 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.

Answer 3

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

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

Answer 4

Демо-версия JS Fiddle

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

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;

}