CSS анімація. Мильні бульбашки

CSS анімація, яка працює на сайті солодкої газованої води 7UP, є прекрасним прикладом підкреслення індивідуального стилю бренду на веб-сайті. Анімація складається з декількох елементів: SVG малювання бульбашок, а потім дві анімації, застосовані до кожної бульбашки.

Перша анімація змінює непрозорість бульбашки і переміщує її вертикально у вікні перегляду; друга анімація створює ефект коливання для додаткового реалізму. Зміщення обробляються для кожної бульбашки, а також застосовується інша тривалість анімації та затримки.

Розробка CSS анімації

Для створення наших бульбашок ми будемо використовувати SVG . У нашому SVG ми створюємо два шари бульбашок: один для більших бульбашок і один для менших бульбашок. Всередині SVG ми розміщуємо всі наші бульбашки в нижній частині вікна перегляду.

<g class="bubbles-large" stroke-width="7">
  <g transform="translate(10 940)">
  <circle cx="35" cy="35" r="35"/>
  </g>
  ...
</g>
<g class="bubbles-small" stroke-width="4">
  <g transform="translate(147 984)">
  <circle cx="15" cy="15" r="15"/>
  </g>
</g>
  ...
</g>

Для того, щоб застосувати дві окремі анімації до нашого коду SVG, який використовує властивість transform, нам потрібно застосувати анімацію до окремих елементів. Елемент <g> у SVG може використовуватися так само, як div у HTML; ми повинні обернути кожну з наших бульбашок (які вже знаходяться в групі) в ще один тег групи.

<g>
  <g transform="translate(10 940)">
  <circle cx="35" cy="35" r="35"/>
  </g>
</g>

CSS має потужні інструменти і дуже простий код для створення складних анімацій. Ми почнемо з переміщення бульбашок по екрану і змінюючи їх непрозорість для того, щоб згладити їх на початку і в кінці анімації.

@keyframes up {
  0% {
  opacity: 0;
  }
  10%, 90% {
  opacity: 1;
  }
  100% {
  opacity: 0;
  transform: translateY(-1024px);
  }
}

Для того, щоб створити ефект коливання, нам просто потрібно перемістити бульбашку ліворуч і праворуч, але потрібно “непереборщити” – занадто багато буде викликати анімацію, яка виглядає занадто жартівною, тоді як занадто мало залишиться непоміченим. Експериментація є ключовою при роботі з анімацією.

@keyframes wobble {
  33% {
  transform: translateX(-50px);
  }
  66% {
  transform: translateX(50px);
  } }

Щоб застосувати анімацію до наших бульбашок, ми будемо використовувати групи, які ми використовували раніше, а також селектор nth-of-type для ідентифікації кожної групи бульбашок окремо. Ми починаємо з застосування значення непрозорості до бульбашок і властивості change , щоб використовувати апаратне прискорення.

.bubbles-large > g {
  opacity: 0;
will-change: transform, opacity;}
.bubbles-large g:nth-of-type(1) {...}
...
.bubbles-small g:nth-of-type(10) {...}

Ми хочемо зберегти всі тривалості і затримки анімації протягом декількох секунд і зробити так, щоб вони повторялися нескінченну кількість разів. І нарешті, ми застосовуємо функцію ease-in-out для того, щоб зробити нашу анімацію більш натуральною і природньою.

.bubbles-large g:nth-of-type(1) {
  animation: up 6.5s infinite; }
.bubbles-large g:nth-of-type(1) circle {
  animation: wobble 3s infinite ease-in-out; }
...
bubbles-small g:nth-of-type(9) circle {
  animation: wobble 3s 275ms infinite ease-in-out; }
.bubbles-small g:nth-of-type(10) {
animation: up 6s 900ms infinite;}

Кінцевий результат

Кінцевий результат будет таким:

See the Pen
Animated – SVG Bubbles
by Steven Roberts (@matchboxhero)
on CodePen.

Перекладач: Гронюк Владислав
Автор: Steven Roberts
Посилання на оригінал: https://www.creativebloq.com/inspiration/css-animation-examples

Сподобався урок? Поділись з друзями!

Вам також може сподобатись

Залишити відповідь

Ваша e-mail адреса не оприлюднюватиметься. Обов’язкові поля позначені *

Повідомити про помилку

Текст, який буде надіслано нашим редакторам: