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

З тих пір, як я повністю перейшла на фронтенд-розробку на роботі, я працюю над багатьма веб-анімаціями, переходами та ефектами. Чим більше я це роблю, тим більше креативних способів я знаходжу, щоб змусити це працювати.

GIF vs Lottie vs ?

Раніше я шукала GIF-файл, стискала його і закінчував на цьому. Потім я дізналася про бібліотеку Three.js, яка дозволяє створювати інтерактивні веб-додатки прямо в браузері. Мій улюблений проект на Three.js — це, мабуть, різдвяна ялинка з подарунками, які можна було б пересувати та розгортати. Створювати щось подібне з нуля було дуже весело!

Потім я дізнався про Lottie, формат анімаційних файлів з відкритим вихідним кодом, який швидко став новим галузевим стандартом у світі веб-розробки.

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

CSS у SVG у CSS

Чесно кажучи, я й гадки не мала, що можна легко зробити анімований SVG з нуля. Секрет полягає в тому, щоб помістити CSS, який анімує зображення, безпосередньо в SVG, потім зберегти його як зображення і посилатися на нього як на звичайний SVG у вашому коді АБО закодувати його і помістити безпосередньо в CSS. Останній підхід робить його менш читабельним, але набагато компактнішим. Я б не рекомендувала цей шлях, якщо ви плануєте змінювати анімацію в майбутньому.

Кодування/декодування

Існує безліч безкоштовних SVG-кодерів, якщо ви вирішите розмістити анімований SVG безпосередньо в CSS:

background-image: url("data:image/svg+xml,...)

Ось посилання на мій улюблений інструмент.

Розшифрувати цю анімацію і отримати зображення у форматі SVG ще простіше — просто скопіюйте і вставте її у ваш браузер і збережіть зображення, натиснувши на кнопку «Зберегти як…».

Натхнення

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

Кінцевий результат був дійсно вражаючим — моя анімація займала лише 8 КБ, і мені довелося додати рівно нуль залежностей, щоб змусити її працювати. Хіба це не круто?

Цей текст з особистого блогу, опублікований з дозволу автора.