Анімація SVG з допомогою CSS: основи, приклади та оптимізація

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

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

CSS Анімації – основи

Поступово CSS анімації допускають зміну значень властивостей CSS. Це можна реалізувати за допомогою ключових кадрів (@keyframes). Вони визначають початковий та кінцевий стан анімації, й проміжні стани між ними.

Приклад коду

@keyframes scaleAnimation {
  from {transform: scale(1);}
  to {transform: scale(1.5);}
}

svg {
  animation-name: scaleAnimation;
  animation-duration: 2s;
  animation-iteration-count: infinite;
}

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

CSS властивості для анімацій

Приклад коду

@keyframes complexAnimation {
  0% {transform: translateX(0) rotate(0); opacity: 1;}
  50% {transform: translateX(50px) rotate(180deg); opacity: 0.5;}
  100% {transform: translateX(0) rotate(360deg); opacity: 1;}
}

svg {
  animation: complexAnimation 4s infinite;
}

Вище зазначений код змушує SVG елемент переміщатися по осі X, обертатися та змінювати прозорість у циклі.

Переваги CSS анімацій для SVG

Швидкість у реалізації та простота

Кросплатформенність

Недоліки та обмеження CSS анімацій

Як і будь-який інструмент, навіть такий потужний як CSS анімації має свої обмеження. До прикладу, для створення складніших анімацій, таких як анімація на основі подій користувача або синхронізація кількох анімаційних елементів, можуть знадобитися додаткові інструменти, такі як JavaScript.

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

Приклади використання CSS анімацій у веброзробці

Анімація логотипа

Одним і популярних методів використання CSS анімацій – це створення анімацій логотипів. До прикладу, логотип компанії плавно з’являється коли ви заходите на сторінку, або змінює свій колір коли ви на нього наводите курсор миші.

Приклад коду

@keyframes logoAnimation {
  from {transform: scale(0); opacity: 0;}
  to {transform: scale(1); opacity: 1;}
}

#logo {
  animation: logoAnimation 1s ease-out;
}

Анімація іконок

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

Приклад коду

@keyframes menuIconAnimation {
  from {transform: rotate(0deg);}
  to {transform: rotate(90deg);}
}

.menu-icon:hover {
  animation: menuIconAnimation 0.5s forwards;
}

Анімація кнопок

Динамічні ефекти кнопок, такі як збільшення при натисканні або зміна кольору при наведенні курсора, також можна отримати за допомогою SVG графіки.

Приклад коду

@keyframes buttonHoverAnimation {
  from {transform: scale(1);}
  to {transform: scale(1.1);}
}

.button:hover svg {
  animation: buttonHoverAnimation 0.3s forwards;
}

Оптимізація CSS анімацій для SVG

Використання Hardware Acceleration

Will-change – властивість, яка забезпечує плавну анімацію. Вона підказує браузеру, що певні властивості елемента будуть змінюватись й дозволяє оптимізувати їх обробку.

Приклад коду

svg {
  will-change: transform, opacity;
}

Скорочення використання ключових кадрів

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

Приклад коду

svg {
  transition: transform 0.5s ease-in-out;
}

svg:hover {
  transform: scale(1.2);
}

Анімація SVG за допомогою CSS – висновки

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

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

Анімація SVG від SELECTOR.SPACE

Наша команда складається з висококваліфікованих спеціалістів, які виконують свою роботу на вищому рівні. Ми прислухаємось до усіх побажань наших клієнтів й дбаємо, щоб наш продукт був високоякісним. Щоб замовити розробку сайту звертайтесь до нас за номером 066 389 02 24, 096 81 00 132 або office@selector.space. Також ми пропонуємо готові рішення. Радо допоможемо втілити ваші ідеї ідеального сайту в життя.

Слідкуйте за нами в Instagram, Facebook та TikTok.