Анимация желе для элемента используя HTML & CSS || Jello animation CSS

Всем привет!

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

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

У нас есть файл index.html, style.css.

В стиле подключены, также подключены шифты.

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

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

Надимем ему название класса Jello.

И туда укажем Jello Animation CSS.

Откроем страницу в браузере с помощью LiveServer.

И посмотрим, что у нас добавилось.

Итак, как мы видим, есть...

Наш элемент заголовок первого типа.

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

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

И в стилях нам нужно обратиться к селектору Degabuddy.

У него укажем background color темного цвета.

Минимальная высота будет 100 VH.

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

Display flex, justify content center и align item.

Также будет центр.

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

и для него укажем цвет будет белый font-size выберем функцию calc туда укажем 5vw плюс 2rem делаем так, чтобы shift был у нас адаптивный и адаптировался под ширину области просмотра под сужение и увеличение и так, также еще давайте добавим свойство text-shadow

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

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

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

Теперь добавим свойство Animation, дадим название.

Укажем название, давайте Jello.

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

Easy In будет скорость.

И Infinity укажем, чтобы был бесконечный цикл.

И также еще добавим такое свойство, как Transform Origin значением центра.

Чтобы от центра шла анимация.

Добавим правило Keyframes.

Отсюда скопируем название.

Вместо Identifier сюда его вставим.

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

Будет у нас 0%.

11,1% запятая и 100%.

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

Translate Z. Укажем 0.

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

Укажем 22,2%.

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

Только будет идти перекос по оси X на минус 12%.

градусов и через пробел перекос по оси Y также на минус 12 градусов.

Видим уже есть применение анимации.

Скопируем это свойство и значение и будем применять для 33,3%.

Туда вставим также свойство и значение и здесь просто заменим

На скилл X будет 6 градусов, а для скилл Y также укажем 6 градусов.

Уже есть такой вот эффект для анимации.

Далее у нас будет следующий ключевой кадр 44,4.

Туда также вставим те же свойства и значения, но заменим минус 3 для X и Y также будет минус 3.

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

Свойства и значения вставляем и меняем на 1.5 градусов и также 1.5 градусов.

Такой вот перекос.

Уже эффект выглядит лучше.

Далее будет следующий ключевой кадр 66.6.

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

0,7 градусов для перекоса по X и также минус 0,7 для перекоса по оси Y следующий ключевой кадр будет 77,7 также здесь вставляем и заменяем на 0,4 градуса и здесь также так

И последний ключевой кадр будет 88,8.

И добавим здесь минус 0,2.

И также для skew y, также минус 0,2.

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

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

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

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

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