10 Інструменти анімації CSS3, які слід закладати в закладки
Оскільки люди схильні легше сприймати речі, які рухаються, спритні анімації можуть покращити користувальницький досвід сайту звернення уваги до важливих елементів, які користувачам необхідно швидко помітити.
CSS3 представив новий синтаксис анімації, який допоможе вам досягти багатьох цікавих речей у ваших проектах. Створення прохолодної анімації іноді може бути складним і трудомістким, однак саме тоді бібліотеки та генератори анімації можуть чудово використовуватись.
Перегляньте деякі анімації, доступні за допомогою CSS:
- 38 Надихаючі анімації CSS3
- 15 красивих текстових ефектів, створених за допомогою CSS
- 30 цікавих CSS анімацій, які ви повинні побачити
- Як створити ефект відмов з анімацією CSS3
У цій посаді ми розглянемо 10 блискучих інструментів, які спрощують і спрощують створення власних анімацій.
1. CSS3Gen CSS3 Генератор анімації
CSS3Gen надає вам простий у використанні генератор анімації, який дозволяє швидко створювати основні анімації. Незважаючи на те, що ви не будете робити складні твори з цим інструментом, це відмінний вибір, якщо ви хочете створити стандартну анімацію без надмірної суєти.
ти не потрібно робити брудні руки кодом, оскільки ви можете встановити властивості форми, перегляньте результат, а потім просто скопіюйте та вставте код у свій власний файл CSS.
2. Анімація CSS
Якщо ви потрібні більш складні анімації, Ви можете знайти CSS Анімація корисним. Він має більш зрілий користувальницький інтерфейс, ви можете встановити трохи більше властивостей, і ви можете слідувати, зупиняти і перезапускати анімацію за допомогою інтуїтивної шкали часу.
Є також приклади анімації, наприклад “Відскік”, “Струсити”, і “Свінг”, що ви можете завантажити в генератор і змінити код відповідно до ваших потреб.
3. Покриття генератора анімації CSS
ПокриттяГенератор анімації, напевно, є найкращим вибором якщо ви новачок у анімації CSS3, і хочете швидко зрозуміти, як вони працюють. Цей простий, але потужний інструмент дозволяє перевірити різні типи анімацій, які CSS3 може запропонувати, і легко перевірити, в чому різниця між ними.
Вам потрібно лише встановити 4 параметри: тип анімації, функцію анімації, тривалість у секундах, і якщо анімація нескінченна. Коли ви будете готові, вам доведеться лише отримати і захопити згенерований код HTML і CSS.
4. Магічні анімації
Магічні анімації це цікава бібліотека CSS, яка дозволяє легко розміщувати анімації зі спеціальними ефектами на вашому сайті. Наприклад, ви можете зробити елементи зниклими, відкритими ліворуч або праворуч, а потім повернути, повернути вниз, вгору, вліво або вправо, а багато інших
Все, що вам потрібно зробити, це завантажити код, включити файл CSS у вашу HTML-сторінку і додати відповідний клас за допомогою jQuery наступним чином:
$ ('. yourdiv'). hover (функція () $ (this) .addClass ('magictime puffIn');); Ви також можете змінити налаштування таймера і зробити анімацію нескінченною за допомогою jQuery (докладніше див. Файл readme).
5. Animate.css
Animate.css надає вам набір прохолодні, крос-браузерні анімації CSS3. Анімації поділяються на такі групи, як: Шукачі уваги, Підстрибуючі під'їзди, Підстрибуючі виходи, Затухаючі входи, і багато інших, так що ви дійсно не можете скаржитися на відсутність вибору.
Ви можете завантажити код з Github, тоді вам потрібно лише додати файл CSS на вашу HTML-сторінку, а відповідні класи CSS до елементів HTML, які потрібно анімувати.
6. Bounce.js
Bounce.js це зручна бібліотека JavaScript, за допомогою якої ви можете створювати складні анімації. Bounce.js має зрілий користувальницький інтерфейс, який дозволяє додавати різні компоненти - наприклад, ослаблення, тривалість, затримку і кількість відскоків - вручну до анімації, або вибрати готовий для використання попередній набір, а потім відтворити анімацію, і налаштуйте властивості, якщо це необхідно.
7. AniJS
AniJS - це бібліотека JavaScript, що дає змогу додавати анімацію CSS3 до ваших проектів і до створювати складні компоненти інтерфейсу такі як анімовані вкладки, акордеони, модальні пристрої, розсувні меню, сповіщення про додатки для мобільних пристроїв, прокрутки та багато іншого.
Він працює з усіма сучасними браузерами, включаючи iOS і Android, не потребує бібліотек третіх сторін і має захоплюючу вітрину під назвою AniCollection, де можна легко експериментувати з різними ефектами, які надає бібліотека.
8. Єдиний елемент CSS Spinners
Ви коли-небудь хотіли покращити свої конструкції анімовані завантаження лічильників? Якщо відповідь так, то ця мила бібліотека CSS може бути відмінним вибором для вас. Код CSS для лічильників записується в LESS. Немає жодних налаштувань, код готовий, потрібно лише вставити його у власні файли HTML і CSS.
9. Одометр
Одометр є блискучим інструментом розміщуйте прохолодні анімовані лічильники на свій сайт. Це бібліотека CSS і JavaScript, частина CSS написана на Sass, і ви можете вибрати з різних тем, таких як “Цифровий”, “Залізнична станція”, і “Автомобіль”.
Для використання одометра необхідно додати файл JavaScript і вибраний файл теми до HTML-сторінки, а потім - до class = "одометр" перемикач на елемент, який ви хочете зробити, в анімований лічильник. Ідеальний вибір для візуального представлення даних, або для створення “Незабаром” Сторінка більш приваблива.
10. Snabbt.js
Snabbt.js це мінімалістична бібліотека анімації, яка допомагає легко переміщати речі. Якщо вам потрібно трохи натхнення, подивіться на демо-версії, щоб дізнатися, чого ви можете досягти за допомогою цього інструменту інтелектуальної анімації, анімована періодична таблиця на скріншоті нижче лише одна з багатьох можливостей, які Snabbt.js полегшує реалізацію.
Вам потрібно написати трохи JavaScript, якщо ви хочете використовувати цю бібліотеку, але в результаті досить ефектно, так що це, ймовірно, коштує неприємностей.
