Як додати анімацію до SVG з CSS

Sep 12, 2025
Як
Image: Web Designer
[Зображення: веб-дизайнер]

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

Для отримання більшого руху натхнення, подивіться на Керівництво Creative Bloq Приклади анімації CSS і як їх кодувати.

Збережіть 100 фунтів стерлінгів з супер раннім квитком Генерувати CSS , одноденна веб-конференція, розміщена творчим блоком, журналом веб-дизайнерів та чистим журналом. Книгу тут .

01. Створіть та зберегти

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

02. Оптимізувати для Інтернету

SVG screenshot

Натисніть значок у верхньому правому куті, щоб збільшити зображення [Зображення: svgomg]

Вирізання непотрібних тегів зробить зображення легше уповільнити. Це можна зробити вручну, копіюючи код до улюбленого редактора та видалення порожніх тегів та метаданих. Альтернативно, фантастичний ресурс називається Svgomg буде робити це автоматично. Вставте код у зону "Вставити розмітки" на інтерфейсі SVGOMG, а потім знову скопіюйте зображення, використовуючи кнопку на нижньому правому.

03. Налаштуйте документ HTML

Відкрийте свій редактор вибору та налаштуйте порожній документ HTML. Ми будемо писати анімацію CSS у файлі під назвою main.css , так що створюйте це теж. Щоб зберегти речі, орієнтовані на анімацію, ми витягнули в CSS-версію Bootstrap 4.1.3.

04. Побудуйте макет

Давайте побудуємо кістки нашого макета і зробити простір для нашого СВГ. Ми додали заголовок та дві стовпці: один зліва для деякого тексту, і один з праворуч, який буде тримати SVG, що ми будемо анімація. Щоб оживити сторінку, використовуйте другу, статичну, SVG як фон на тег тіла.

05. Помістіть SVG

Ми використовуємо нашу анімацію, щоб зробити введення у верхній частині сторінки більш цікавою. Вставте оптимізований код SVG у другий стовпчик на сторінці. При використанні Bootstrap, дайте SVG клас імм-рідина Щоб переконатися, що це масштаби на мобільних пристроях.

06. Додайте класи до SVG

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

 & lt; svg & gt;
& lt; g & gt;
& lt; rect class = "rectbackground" ширина = "147.4107"
Висота = "68.7917" x = "31.2946" Y = "114.1042"
rx = "4.5882" ry = "3.9565" fill = "# 2a7fff" / & gt;
& lt; клас шляху = "retraxtext" d = "..." Vector-Effect = "немасштабно-інсульт" інсульт-ширина = ". 470476156" шрифт-розмір = "12" заповнити = "# FFF"
Заповнення = "vevodd" stroke = "# fff" stroke-linecap = "круглий" / & gt;
& lt; / g & gt;
& lt; / svg & gt;

07. Початкові держави

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

 Path.RectText {
непрозорість: 0;
}
rect.rectbackground {
непрозорість: 0;
}

08. оголосити анімацію

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

 @Keyframes textDraw {
0% {}
50% {}
100% {}
}
@Keyframes rectfade {
від {}
до {}
}

09. Призначення анімації та властивостей

SVG and coding

Натисніть значок у верхньому правому куті, щоб збільшити зображення [Зображення: Joseph Ford]

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

 rect.rectbackground {
непрозорість: 0;
Анімація: rectfade 1s кубічний-бутий (0,645,
0,045, 0,355, 1) вперед;
}

10. Анімація прямокутника

SVG image

Натисніть значок у верхньому правому куті, щоб збільшити зображення [Зображення: Joseph Ford]

Завдяки двома ключовими кадрами, все, що нам потрібно зробити для нашого прямокутника, встановлюється набір атрибутів. Почнемо з 1% ширина і закінчити 100% дати «розширення правильному ефекту». Ми також можемо встановити непрозорість: 1 до останнього ключа, щоб форма не зникає в той же час. 

 @Keyframes rectfade {
від {
ширина: 1%;
}
до {
Ширина: 100%;
непрозорість: 1;
}
}

11. Анімація тексту

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

 Path.RectText {
непрозорість: 0;
Анімація: TextDraw 4S
кубічний-бутий (.56, -0,04, .32, .7) вперед;
}

12. Затримка початку

Наш текст повинен працювати так, як прямокутник закінчив. Оскільки прямокутник має одну секунду, затримує початок тексту анімації. 

 Path.RectText {
непрозорість: 0;
Анімація: TextDraw 4S
кубічний-бутий (.56, -0,04, .32, .7) вперед;
анімація-затримка: 1s;
}

13. Нанесення лінії емуляції

SVG animation

Натисніть значок у верхньому правому куті, щоб збільшити зображення [Зображення: Joseph Ford]

Щоб отримати ефект малювання лінії, ми будемо використовувати інсульт і притулок параметри. Ваші значення будуть різними до шахти залежно від SVG ви використовуєте. Щоб знайти своє значення, використовуйте бажані інструменти розробника та збільшення інсульт від 0 доки вся форма не покрита одним ударом. 

 Path.RectText {
непрозорість: 0;
Інсульт: 735;
Анімація: TextDraw 4S
кубічний-бутий (.56, -0,04, .32, .7) вперед;
анімація-затримка: 1s;
}

14. Перший креслярський кресляр

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

 0% {
Заповніть: RGB (255, 255, 255, 0);
Інсульт: #fff;
інсульт-тисте: 800;
непрозорість: 1;
}

15. Намалюйте лінії

Наш середній ключ з'являється 40% через анімацію. Ми приносимо притулок Повернутися до нуля, щоб дефіс охоплює весь шлях. Ми можемо повторно додати прозорий заповнити на цьому етапі, щоб переконатися, що заповнення відображається лише після завершення малювання. 

 40% {
інсульт-тисте: 0;
Заповніть: RGB (255, 255, 255, 0,0);
}

16. Заповніть форму

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

 100% {
Заповніть: RGB (255, 255, 255, 1);
інсульт-тисте: 0;
непрозорість: 1;
}

generate conference

Ця стаття була опублікована в журналі Creative Web-дизайну Веб-дизайнер . Купити проблему 286 або підписатися .

Читати далі:

  • Додати фільтри SVG з CSS
  • Як спроектувати з фігурами CSS: Введення
  • Як код інтелектуального тексту з CSS

Як - Найпопулярніші статті

Початок роботи з бульмою

Як Sep 12, 2025

(Кредит зображення: Бульма) Хочете почати роботу з використання�..

Як створити символ відеоігор у Збраш

Як Sep 12, 2025

Тут я буду говорити про процес створення Рей, персонажа, який я зробив �..

Використовуйте інструмент Marmoset, щоб представити моделі ВР

Як Sep 12, 2025

Marmoset toolbag не є новим для 3D-арт промисловість. Це було протягом б..

Головний контроль версії для віддалених команд

Як Sep 12, 2025

Працюючи дистанційно став набагато частіше в веб-розробці протягом ос..

Створення та анімація SVG полігони

Як Sep 12, 2025

У цьому підручнику ми будемо створювати ряд зображень з трикутників SVG..

4 Поради щодо розробки навичок розробника

Як Sep 12, 2025

(Зображення кредиту: Robert Pizzo) Superfriendly директор Dan Mall буде..

Як додати текстуру до пастелів з праймерами

Як Sep 12, 2025

За допомогою Пастельні праймери Для створення поверхонь для в..

Створіть ефект сплеску в RealFlow

Як Sep 12, 2025

Page 1 з 2: Сторінка 1 Сторінка 1 Сторінка 2 ..

Категорії