Доброго дня усім читачам. Хочу представити вашій увазі невеликий анонс нової бібліотеки CSS анімації.
Створена вона на CSS3 і містить майже 90 видів анімації, а також класи для затримки і нескінченного програвання анімації.
З чого складається
На сайті проекту уся анімація розбита по групах. У кожній групі є анімація появи і зникнення, яку відразу можна визначити за словами in та out. Також до окремої групи увійшли поодинокі анімації, які не вийшло більше нікуди прилаштувати. Ця группа носить назву Else.
Використання
Використовувати бібліотеку дуже просто. Всього лишь потрібно скачати та підключити на вашому сайті файл стилів awesome.min.css і додати об'єкту, який потрібно аніміювати необхідний клас анімації і також клас animation. Клас анімації, котрий потрібно додати збігається з назвою самої анімації, яку ви маєте змогу подивитися на сайті проекту. Наприклад, я хочу додати до свого елементу анімацію появи вгору, вона має назву fade-in-up.
Ось як має виглядати мій елемент:
<div class="animation fade-in-up">...
Якщо ви використовуєте анімацію появи, то ще рекомендую додавати id = «animation», або css правило visibility: hidden;. Це потрібно для того, щоб ваш елемент не було видно до початку анімації. У свою чергу клас animation зробить ваш об'єкт видимим і перешкодить поверненню об'єкта до первісного стану після закінчення анімації.
Додаткові можливості
Якщо ви хочете зробити затримку анімації, використайте один з цих класів: delay-05s затримка 0.5 сек, delay-1s затримка 1 сек, delay-1-5s затримка 1.5 сек, delay-2s затримка 2 сек, delay-3s затримка 3 сек.
Для нескінченно повторення анімації добавте клас replay.
Також можливо управляти анімацієї за допомогою jQuery. Все, що вам потрібно, це невеликий скрипт, що буде додавати до вашого елементу клас анімації.
Висновок
Бібліотека важить всього 64 кб, а мінімізований файл - 39 кб, що досить не погано з урахуванням кількості видів анімації.
І звісно посилання на проект
Ще немає коментарів