Анимация отскока в CSS || Amimation CSS Effects - Bounce

Всем привет!

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

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

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

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

И внутрь укажем название также контента Bounce Animation CSS.

Bounce переводится как подпрыгивание.

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

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

В стилях обращаемся к заголовку первого типа с названием класса Bounce и для него укажем цвет будет белый, font-size укажем функцию calc 5vw плюс 1rem, сделаем его адаптивным и также добавим еще для некоторого эффекта текст

shadow смещение по горизонтали 0 1 ram по вертикали 2 ram будет размытие и цвет будет у нас rgba значение 0,0,0 и на 80 процентов будет затемнение такая вот тень для нашего текста так теперь давайте здесь ниже создадим свойство animation добавим свойство animation дадим название для анимации

bounce продолжительность будет 1 секунда easyenout укажем время и infinity будет бесконечная затем здесь ниже создадим keyframes и отсюда скопируем название анимации bounce ставим его сюда и здесь нам нужно указать следующее значение для 0 процентов 20 процентов и

50% у нас будет идти transform translate z значением 0.

Затем создаем для 40% будет у нас свойство transform translate 3d.

0 это по горизонтали, минус 3 rem это по вертикали вверх и 0 это по глубину.

И также укажем Scale, масштабирование по вертикали на 1.1.

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

То есть вот для вот этого этапа мы создали подпрыгивание вверх на минус 3 RAM.

Теперь для 70% давайте укажем также Transform, Translate 3D 0 по горизонтали.

минус полтора рэм по вертикали и ноль в глубину и также укажем масштабирование скейл y 1 и 0 5 и теперь будет такой эффект поднимается на минус 3 падает вот там где 50 на ноль и снова там где 70 подымается на ударяется и на минус полтора рэм такой вот эффект так теперь дальше для

80% здесь укажем.

Transform.

Translate 3D.

Точнее Translate.

Translate Z будет 0.

И также укажем Scale.

Y. Масштабирование по вертикали на 0.95.

И последнюю точку укажем давайте.

90%.

Также будет свойство Transform.

Translate.

3D.

0.

Горизонталь.

Минус 0.4.

Рем.

Небольшой подъем вверх.

Это по вертикали.

И 0.

Глубину.

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

Scale.

Y. Это по вертикали.

Масштабирование на 1.5.

0.5 также.

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

Также мы можем такую анимацию добавлять для других элементов.

Давайте в Index.html создадим, например, TagButton с классом Button.

И туда давайте также укажем BounceButton CSS, допустим, такой контент.

Как мы видим, снизу добавилась у нас кнопка.

Давайте текст закомментируем и стилизуем немного кнопку и применим кнопки такой же анимации.

Обращаемся к BTN, укажем padding от внутренней отступы, будет 1.5 рэм и 3 рэм.

1.5 отступ сверху и снизу и 3 рэм отступ справа и слева.

Добавим background, Dodger Blues ключевое слово будет.

также цвет белый для текста и border-radius, скругление углов со всех сторон на 0.5 rem.

Теперь отсюда мы можем скопировать animation, ставим сюда кнопки также и как мы видим для кнопки будет такой же эффект.

Давайте еще укажем курсор pointer, чтобы при наведении курсор менялся на указатель.

Также мы можем сделать, давайте отсюда вырежем анимацию, мы можем применить анимацию

чтобы было при Hover эффекте, при наведении на кнопку.

Обращаемся к BTN, добавляем псевдокласс Hover и туда указываем анимацию.

И при наведении на кнопку будет идти у нас вот такой вот эффект.

Как только мы наводим, кнопка начинает у нас прыгать.

Таким вот образом получилось делать такую вот анимацию для текста, для кнопки и для других элементов также это можно применять.

используя только HTML и CSS анимацию шаг за шагом.

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

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