Animate.css вже декілька років, і я мушу визнати, що я дуже спізнився на вечірку. Я виявив це лише пару місяців тому, шукаючи в Інтернеті деякі підручники з анімації CSS і виявив, що має бути найшвидшим, найпростішим способом анімації навколо, Animate.css.
Animate.css, створений хлопцем під назвою Dan Eden, - це швидкий спосіб дізнатися, як працює CCS, і отримати деякі анімаційні дії на вашому веб-сайті.
Описаний як "Просто додайте водної CSS-анімації" Animate.css - це трохи весело з серйозною стороною. Це дозволяє навіть аматорським веб-дизайнерам, таким як я, швидко зрозуміти основи анімації CSS та створити прості, але ефективні ефекти для веб-сайтів. Цей інструмент може зробити це від одного анімованого заголовка до більш залучених рухів.
Animate.css
Animate.css доступний для завантаження з GitHub і по суті є бібліотекою простих CSS-ефектів, зібраних в одному місці. Кожна анімація гарно упакована та готова до використання. Все, що вам потрібно зробити, - це знайти анімацію, яка вам подобається, і застосувати клас. Це дійсно все, що там є.
Вам не доведеться завантажувати всю бібліотеку, якщо ви не хочете, оскільки в ній є 2500 рядків коду. Ви можете зайти на сайт Animate.css, знайти анімацію та натиснути посилання Завантажити Animate.css. Він завантажує клас на веб-сторінку, щоб скопіювати та використовувати, як вважаєте за потрібне.
Простіше користуватися GitHub, хоча і детальніше, щоб знайти ефект, який ви шукаєте.
- Перейдіть на сторінку css GitHub.
- Клацніть посилання Джерело, щоб отримати доступ до списку елементів.
- Виберіть зі списку тип ефекту, який шукаєте. Відмов - це шукач уваги, тому виберіть посилання уваги шукачів.
- Виберіть bounce.css.
- Скопіюйте код і розмістіть його на своїй сторінці, щоб застосувати анімацію.
Це дійсно так просто. Ви, очевидно, вибрали б різні варіанти для різних ефектів, але кінцевий результат той самий. Доступ до коду, необхідний для важкого підйому на сторінці.
Побудова анімаційного об’єкта за допомогою Animate.css
Створити щось круто за допомогою Animate.css просто. Це лише питання знайти код CCS та додати його до власного CSS. Якщо я можу це зробити, будь-хто може!
Перший варіант на сторінці Animate.css - це відмов, тому давайте скористаємося цим у цьому прикладі.
- Вставити ' 'всередині у вашому аркуші стилів.
- Знайдіть CSS для потрібної анімації та додайте її до елемента, який потрібно анімувати. Наприклад, додати " ', щоб додати цей ефект відмов для тестування, зображення чи будь-чого іншого.
- Додайте наступний CSS-код, щоб він працював. Взято з bounce.css вище.
@keyframes відмов {
від, 20%, 53%, 80%, до {
анімація-функція синхронізації: кубічно-безьє (0, 215, 0, 610, 0, 355, 1.000);
перетворити: translate3d (0, 0, 0);
}
40%, 43% {
анімація-функція синхронізації: кубічно-безьє (0, 755, 0, 050, 0, 855, 0, 060);
перетворити: translate3d (0, -30px, 0);
}
70% {
анімація-функція синхронізації: кубічно-безьє (0, 755, 0, 050, 0, 855, 0, 060);
перетворити: translate3d (0, -15px, 0);
}
90% {
перетворити: translate3d (0, -4px, 0);
}
}
.bournce {
анімація-ім'я: відмов;
трансформаційне походження: центр дна;
}
Продовження анімації разом з Animate.css
Вищевказана послідовність додає ефект відмов, коли сторінка спочатку завантажується, що круто, але одноразово. Як щодо того, як ми додаємо його до наведення курсора. Таким чином, кожного разу, коли хтось наближається до тесту, він відскакує. Я б не робив це на виробничому веб-сайті, але це чудовий спосіб продемонструвати, як все працює.
Додайте такий код у свій CSS, щоб додати ефект відмови від наведення. Щоразу, коли миша наводить курсор на елемент, він повинен підстрибувати.
.animated: навести {
-webkit-анімація-тривалість: 1s;
-моз-анімація-тривалість: 1с;
-ms-анімація-тривалість: 1s;
-о-анімація-тривалість: 1с;
тривалість анімації: 1 с;
-webkit-animation-fill-mode: обидва;
-moz-анімація-режим заповнення: обидва;
-ms-animation-fill-mode: обидва;
-o-анімація-режим заповнення: обидва;
режим анімації-заливки: і те й інше;
}
Якщо ви знаєте CSS, ви дізнаєтесь набагато краще, ніж я, про те, як реалізувати різні ефекти для різних дій. Як початківець, це і бібліотеки, надані в Animate.css, допомагають мені створити основні, але ефективні анімації для моїх веб-сторінок.
Я не знаю, скільки б я використала на веб-сайті, оскільки вони не завжди надто добре впадають, а мобільні користувачі взагалі їх не люблять. Однак, як урок про те, як працює CSS і як його можна використовувати для розширення Інтернету, це чудовий ресурс. Я лише початківець, але навіть витративши пару годин з Animate.css на цей підручник навчив мене багато чому. Думаю, я з цим пограю набагато більше, перш ніж закінчу. Як щодо тебе?
