Анимация для текста HTML & CSS || Text animation using HTML & CSS step by step

Всем привет!

В этом видео вы узнаете, как сделать такую вот анимацию для текста, используя только HTML и CSS шаг за шагом.

Итак, приступим к созданию анимации для текста.

У нас есть файл index.html, style.css, подключены обнуляющие стили.

Есть отдельное видео об обнуляющих стилях, ссылку оставлю вверху справа.

Также подключены обычные стили и подключены шрифты.

Итак, давайте здесь внутри в баде создадим разметку, создадим div с классом контейнер.

Внутри него у нас будет размещаться заголовок второго типа.

Дадим ему название Animation.

И туда добавим контент, укажем текст Animation.

Теперь давайте откроем страницу и посмотрим, что у нас добавилось.

Итак, мы видим, есть наш заголовок.

Давайте свернем браузер в половину и Visual Studio Code.

Перейдем в стиле.

В стиле нам нужно обратиться к Divus классам контейнер.

Для него укажем ширина 100%, минимальная высота 100%.

Добавим background, сделаем его черного цвета.

И укажем размещение элемента по центру.

Укажем DisplayFlex.

JustifyContent будет центр.

Это выравнивание по горизонтали.

И AlignItemsCenter выравнивание по вертикали.

Как мы видим, элемент размещается четко по центру.

Теперь здесь ниже обратимся к заголовку второго типа с названием класса Animation.

И для него укажем font-size 12vw.

Сделаем побольше shift и адаптивный.

Также укажем цвет с ключевым словом Dodger Blue.

И добавим свойство Animation.

Туда укажем название анимации.

Это будет Text Animation.

Продолжительность будет 3,5 секунды.

Будет

Линейный переход.

И также укажем Infinity бесконечное.

Затем здесь ниже нам нужно указать Keyframes.

И отсюда мы копируем название анимации и вставляем его сюда.

И первый кадр у нас будет идти 0%.

Туда мы укажем свойство TextShadow.

Смещение по горизонтали будет 0, по вертикали также 0.

И будет цвет, укажем, черный.

Теперь давайте здесь скопируем это, вставим сюда и здесь заменим цвет на красный.

И через запятую также будем вставлять.

Смещение по горизонтали будет и по вертикали 0,0.

Просто будем заменять цвета.

Первый был черный, второй красный.

Третий укажем, допустим, оранжевый.

Четвертый давайте укажем yellow, желтый.

Затем пусть будет

Sky Blue также укажем.

Светло-синий.

Еще один пусть также будет Dodger Blue.

И последний укажем белый.

White.

И также нам нужно ниже добавить трансформацию.

Свойство Transform.

И укажем Translate.

Смещение по горизонтали будет 0.

И по вертикали также будет 0.

Теперь нам нужно скопировать отсюда этот первый кадр.

Вставляем его здесь ниже.

И здесь указываем от 0 до 100%.

И здесь нам нужно изменить.

Здесь мы меняем первое значение минус 1 пиксель.

И второе также будет минус 1 пиксель.

Смещение по горизонтали и по вертикали.

Это для черного цвета.

Здесь параллельно будем добавлять минус 3 пикселя и минус 3 пикселя для красного цвета.

Давайте расширим.

Здесь для оранжевого цвета укажем минус 5 пикселей.

Для желтого цвета укажем

минус 7 пикселей так для зеленого цвета у нас будет минус 9 sky blue будет минус 11 пикселей шаг у нас идет в 2 пикселя и последний точнее предпоследний укажем минус 13 пикселей и последний белый минус

15 пикселей.

Как мы видим, есть уже анимация.

И давайте также еще добавим сюда Transform.

Здесь поменяем на смещение по горизонтали 1 рэм и по вертикали также 1 рэм.

И вот давайте расширим.

Видим, есть у нас такая вот анимация для текста.

На этом все.

Спасибо за просмотр и успехов обучении.

Если вам понравилось данное видео, ставьте лайк и подписывайтесь на мой канал.