Tada animation CSS using HTML & CSS step by step

Всем привет!

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

Если вам понравится данное видео, поставьте, пожалуйста, лайк и напишите комментарий в поддержку.

Это способствует развитию канала.

Спасибо и приятного просмотра!

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

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

Теперь давайте внутри в баде добавим разметку, создадим заголовок первого типа, дадим название класса tada и туда укажем content.tada.animation.css.

Откроем структуру.

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

на странице и так как мы видим есть заголовок первого типа давайте свернем браузер свернем visual studio code и закроем файл index.html чтобы лучше было видно стили масштабируем их перейдем теперь в стили обратимся к селектору тега body на него укажем background-color темного цвета минимальная высота будет 100vh и также

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

Укажем DisplayFlex, JustifyContentCenter и AlignItems, также центр.

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

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

И для него укажем цвет будет белый, font-size укажем функцию calc.

Сделаем адаптивным, укажем 5vw плюс 1rem, чтобы элемент у нас был.

Увеличивался и уменьшался, адаптировался под ширину области просмотра.

Затем еще добавим свойство Text Shadle, чтобы более красиво выделить эту надпись.

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

функцию RGBA цвет будет темный, 0,0,0 с затемнением на 80%.

Мы видим, есть такая вот тень для нашей надписи.

Теперь здесь ниже укажем Animation.

Дадим название для Animation Name тогда.

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

И скорость укажем Easy Inout.

Затем здесь ниже добавим правило KFrames.

Скопируем отсюда название и вместо Identifier ставим сюда Animation Name.

И укажем следующие ключевые кадры.

0% изгруппируем 100%.

Будет у нас свойство Transform, Scale, X и 1.

Затем следующие ключевые кадры будут у нас 10% и 20%.

Туда укажем свойство Transform Scale 3D.

Это будет масштабирование.

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

Первое значение отвечает за горизонталь.

Второе за вертикаль.

А третье за глубину.

И укажем туда пиво.

Значение.

Также еще добавим.

Rotate.

Минус 3 градуса.

Это для ключевых кадров.

Именно вот этого положения.

10 и 20%.

Обновим страницу.

Видим вот есть такой эффект.

Теперь.

Следующие ключевые кадры у нас будет 30%, 50%, 70% и 90%.

Отсюда можно скопировать эти же свойства и значения.

Вставим их сюда.

И здесь просто параллельно для этих элементов выберем значения 1 и 1.

И вращение укажем не минус 3, а 3 градуса.

И теперь будет такое вот.

Давайте еще сюда добавим значение Infinite, чтобы анимация у нас была бесконечной.

Так, вот есть такой эффект.

И затем еще последние ключевые кадры определим для 40%, 60% и 80%.

Туда укажем, сюда скопируем эти свойства значения, вставим для Scale 3D остаются они такие же.

Просто здесь укажем Rotate минус 3 градуса.

И теперь вот откроем масштабируем.

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

Как мы видим такой вот идет эффект.

Итак на этом все.

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

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