Может ли CSS3 переходить размер шрифта? - PullRequest
Новая
       5

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

64 голосов
/ 16 февраля 2012

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

Пример кода: 

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

Ответы [ 4 ]

84 голосов
/ 16 февраля 2012

Цвет меняется со временем, но шрифт переключается немедленно по какой-то причине.

Ваш 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/).

72 голосов
/ 16 февраля 2012

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

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

это также работает.

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

20 голосов
/ 05 апреля 2014

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

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

0 голосов
/ 22 марта 2013

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;

}
...