Как с помощю css плавно увеличить текст?

Question

[Николай Романов]

Я знаю что можно плавно увеличивать фон. Можно ли так с текстом?

Хочу статический фон и плавное увеличение текста на нем. Допустим с 16px до 28px. Без hover эффектов.

Comments

[Виолетта Морозова]

При каких обстоятельствах в css можно увеличивать фон? Где вы такое взяли? Динамические CSS свойства будут срабатывать при отклике на какие-то события. В css-е это может быть наведение на элемент, сам момент нажатия, состояние посещенной ссылки и фокус на элементе. Все остальные события обрабатываются через js. При каком поведении должен увеличиваться шрифт? Все что зависит от времени, кликов, скроллов и пр. - все через js.

Answer 1

[aloky]

transition: all 1s;

Comments

[Николай Романов]

<span style="transition: all 1s;">1</span> цифра 1 не увеличивается)

[Виолетта Морозова]

Это не будет работать без hover'а

[aloky]

meekes, Так ты хочешь как? При каком случае он увеличивался?

[Николай Романов]

aloky, просто должен увеличиваться, если на него смотришь с 16px до 28px или со 100% до 150%

[Егор Живагин]

meekes, погуглите свойство animate , и анимацю на css . Вам нужно с его помощью менять font-size.

[Николай Романов]

Спасибо нашел, что искал, так работает, пытаюсь настроить плавность.

@keyframes test {
from{font-size: 70px;}
to{font-size: 90px;}
}

.zoom{
animation-name: test;
    animation-duration: 4s;
    animation-iteration-count: infinite;
    animation-timing-function: linear;
}

[Николай Романов]

Если делать через % , получается очень крутая плавность

@keyframes test {
from{font-size: 70%;}
to{font-size: 100%;}
}