Анимация раскачки для элемента HTML & CSS || Swing animation CSS

Всем привет!

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

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

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

Теперь давайте внутри в body добавим разметку, создадим заголовок первого типа, дадим ему название класса Swing.

Swing от английского означает качать или раскачивать.

Давайте также внутри заголовка добавим контент, укажем Swing Animation CSS.

Откроем страницу в браузере с помощью Live Server и посмотрим, что у нас добавилось.

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

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

Закроем файл Index.html и масштабируем стили, чтобы лучше было видно, что у нас здесь будет добавляться.

В стилях обратимся к селектору тега Body.

Для него укажем Background Color черного цвета.

Сделаем его.

Также укажем минимальная высота будет 100 В. Чтобы была возможность разместить элемент по центру.

Для этого будем использовать свойства Display Flex.

Justify Content Center позволит разместить элемент по горизонтали по центру.

И Align Items Center по вертикали будет у нас также элемент размещаться по центру.

Обратимся к заголовку первого типа с названием класса Swing и для него укажем белый цвет.

Изменим размер шифта, укажем font-size, выберем функцию calc и туда укажем 5vw плюс 2rem.

Сделаем этот шифт адаптивным, чтобы при уменьшении или расширении ширины области просмотра у нас контент адаптировался.

Также еще применим свойство TextShadow.

Тень.

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

1 рэм будет по вертикали.

2 рэм будет размытие.

И выберем цвет.

Функцию RGBA.

Темный цвет.

0,0,0.

Затемнение на 80%.

Как мы видим добавилась такая вот тень для этой надписи.

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

Animation.

Дадим название Swing.

Продолжительность будет 1 секунда.

Скорость укажем Easy In.

И укажем Infinite.

Это чтобы анимация была у нас бесконечной.

И также укажем Transform Origin.

С значением Top Center.

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

Вместо identifier нам нужно ставить animation name.

Называется анимация у нас swing.

И добавить ключевые кадры.

Первый ключевой кадр у нас будет 20%.

Свойством в нем будет следующее.

Transform, Rotate, 15 градусов.

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

Она уже применяется.

Следующий ключевой кадр будет 40%.

И укажем Transform Rotate минус 10 градусов.

И теперь как мы видим, вот есть такой эффект для нашего текста.

Следующий ключевой кадр будет 60%.

Туда укажем Transform Rotate 5 градусов.

Будет меньше угол наклона для 60%.

80% укажем свойство Transform Rotate минус 5 градусов.

И для 100% укажем Transform Rotate 0 градусов.

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

Анимация раскачки.

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

В немного другом формате.

В том плане что мы можем изменить.

Для свойства Transform Origin.

Значение вместо Top.

Укажем давайте Bottom.

И идет привязка снизу.

И теперь вот раскачка идет с таким вот.

В таком вот формате.

То есть как будто бы она здесь у нас.

К центру и к низу.

Привязана и качается текст в таком стиле.

Давайте посмотрим.

Также еще можем применить Left Center.

Теперь будет идти вот таким вот образом.

Анимация.

Выглядеть для текста.

И здесь если заменим на Right Center.

То будет наоборот.

С правой стороны будет фиксация.

И вот.

Как мы видим, будет такой вот также эффект для анимации.

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

На этом все.

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

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