Анимация для текста

Сегодня мы с вами напишем анимацию для текста. Нашей задачей будет не просто анимировать текст, а сделать это для широкого применения. Как правило, анимация пишется под определенный текст. Если изменить или поменять его, то анимация ломается. Давайте попробуем избежать этой проблемы. Идея следующая: мы пишем блок определенным классом, а весь текст внутри него разбиваем на буквы, каждая из которых будет находиться в теге <span>. Затем анимируем эти самые теги <span>.

Для создания анимации перекопируйте следующие части кодов:

HTML:
                <div class="textScale">
                    <span>П</span>
                    <span>р</span>
                    <span>и</span>
                    <span>в</span>
                    <span>е</span>
                    <span>т</span>
                    <span></span>
                    <span>к</span>
                    <span>а</span>
                    <span>к</span>
                    <span></span>
                    <span>д</span>
                    <span>е</span>
                    <span>л</span>
                    <span>а</span>
                    <span></span>
                    <span>?</span>
                </div>

            
CSS:
                .textScale span {
                    display: inline-block;
                    font-size: 30px;
                    color: antiquewhite;
                    text-shadow: 0 0 4px #000;
                    margin: 0 2px;
                }
        
                .textScale:hover span {
                    animation: textScale 1s ease 0s 1 normal none;
                }
        
                @keyframes textScale {
                    0% {
                        transform: scale(1);
                        text-shadow: 0 0 4px #000;
                    }
        
                    50% {
                        transform: scale(2);
                        text-shadow: 0 0 4px #000;
                    }
        
                    100% {
                        transform: scale(1);
                        text-shadow: 0 0 4px #000;
                    }
                }
            
JS:
                var textScaleDelay = 0.1;

                document.querySelectorAll('.textScale span').forEach((item) => {

                    textScaleDelay = textScaleDelay + 0.2

                    item.style.animationDelay = textScaleDelay + "s";

                });
            

После копирования вышеупомянутых кусков кода наша анимация будет готова. Все стили CSS, кроме тех, которые касаются непосредственно анимации, можете изменять по своему желанию. Для ее корректной работы не рекомендуем вносить изменения в структуру html (менять классы или теги) или JavaScript кода.