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

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

Для этого Вам необходимо напечатать свой текст в любом векторном редакторе, экспортировать его в формате .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. Удачи!