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

Question

Может ли 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;

 }

1032 4

html css css3 css-transitions

4 ответов:

Comments

Ничего не найдено.

thirtydot · Accepted Answer · 2012-02-16 15:04:19

переходы цвета отлично с течением времени, но шрифт переключается сразу же по некоторым черт побери поводу.

код 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/).

Artur Keyan · Accepted Answer · 2016-10-14 15:40:05

попробуйте установить переход для всех свойств:
-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.

Charlie · Accepted Answer · 2014-04-05 00:50:54

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

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

ROFLwTIME · Accepted Answer · 2013-03-22 15:33:52

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;

}