Чи може CSS3 розмір шрифту переходу?

81

Як можна збільшити розмір шрифту при наведенні курсора? З часом кольорові переходи працюють нормально, але розмір шрифту чомусь змінюється негайно.

Зразок коду:

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

html css css-transitions

— Білка
джерело

106

Колір з часом добре переходить, але шрифт негайно змінюється з певних причин.

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

— тридцятьточок
джерело

6

+ один за вживання слова 'dagnabbit' у відповідь на запитання 'що в заклинанні': P #LanguageStyleMatching

— Барт

2

Це було поетапне поступове використання, хтось відредагував це питання з будь-якої причини.

— тридцять крапок

1

Я б стверджував, що не використовуватиму allключове слово для переходу з міркувань ефективності. Це може зробити вашу сторінку жахливо повільною. Виберіть більш детальний синтаксис: transition: color 12s, font-size 12s;

— mcguiretj

чи є спосіб зробити той самий ефект, але з властивостями background-color та background-clip ? Я намагаюся це зробити :) і був би вдячний, якщо для цього вже є рішення.

— Леонардо Маффі

@LeonardoMaffei: Я рекомендую задати нове запитання, якщо ви не можете знайти відповідь. Обов’язково додайте свій код, демонстраційну версію та гарне пояснення того, що ви намагаєтесь зробити.

— тридцять пунктів

75

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

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

— Артур Кейан
джерело

6

неправильна відповідь, це працює, але розмір шрифту не є "підвластивістю" шрифту. властивість font не існує, це скорочена властивість

— Kustolovic

26

font-sizeЗдається, переходи для кроку за пікселем і, отже, не плавні.

Якщо це лише один рядок, можливо, ви зможете використовувати transform: scale(.8). Масштабуйте, а не вгору, щоб не втратити якість. Вам, ймовірно, також потрібно буде використовувати transform-origin: 0 0або інше значення залежно від вирівнювання тексту.

— Чарлі
джерело

Це дійсно хороша порада! Зіткнувся з різкою анімацією розміру шрифту на мобільному, особливо на Android, тоді як на робочому столі все було добре. Спираючись на transform: scale()замість font-sizeвиправленого. Тепер це гладко на всіх платформах.

— Fabien Snauwaert

0

Демонстрація JS Fiddle

Альтернативою може бути те, що ви також можете використовувати фреймворк, такий як 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;

}

— ROFLwTIME
джерело

8

Питання навіть не посилається на javascript.

— Чарлі