Как через css заменить текст в строке и предать анимацию этой замене?

Question

[Ingernirated]

Всем привет!
Подскажите, есть строка
<p class="text">привет</p>
Возможно ли заменить текст на "hello" и при этом, чтобы его появление было анимировано?

Answer 1

[Rustam Bainazarov]

Замена содержимого CSS недоступна. Если без JS и чтобы было плавно — у вас только один вариант: разместить несколько, к примеру, span'ов с разным текстом и абсолютным позиционированием внутри родительского контейнера. И анимировать их поочередно, создавать иллюзию смены текста (геморрой): https://jsfiddle.net/yofud4h0/2/

Если о замене текста, то как бы можно через CSS -- заменой значения свойства content у псевдоэлементов:
https://jsfiddle.net/yezrts0b/

Текст под иллюстрацией женского портрета я тут анимировал заменой значения свойства content, но плавно это сделать нельзя, если только хаками с привязкой к шагам анимаций цвета текста, прозрачности и т. п. (геморрой).

Comments

[Ingernirated]

спасибо!

Answer 2

[Remove1994]

На самом деле, это возможно.

Для этого Вам необходимо напечатать свой текст в любом векторном редакторе, экспортировать его в формате .svg и загрузить на свой сайт. После этого нужно зайти в css-редактор, найти элемент, текст которого необходимо заменить, и ввести там этот код:

background-color:transparent;
color:rgba(0,0,0,0.0);
background-image:url(https://домен.сайта/путь-к-файлу/имя-файла-с-вашим-текстом.svg);
animation: fadeIn ease 1s

Это сделает исходный текст невидимым, наложит под него векторное изображение Вашего текста и добавит к нему анимацию длительностью в 1 секунду (число по желанию можно изменить на любое другое).

Рекомендую перед тем, как всё это делать, преобразовать своё векторное изображение в путь. Иначе сайт будет воспринимать его как обычный текст и задавать ему шрифт по умолчанию Times New Roman. Также рекомендую тщательно рассчитать размеры Вашего изображения, чтобы оно хорошо смотрелось, как с компьютера, так и с мобильных устройств.

Вот такой вот креативный обход JS. Удачи!