Головна » Інструментарій » Злий CSS - гаряча нова бібліотека анімації в чистому CSS3

    Злий CSS - гаряча нова бібліотека анімації в чистому CSS3

    Завдяки CSS3 ви можете створити в Інтернеті деякі божевільні анімації. Це можуть працювати з усіма браузерами та елементами сторінки керувати елементами навігації, випадаючими списками, вкладками, назвіть її.

    Насправді ви можете навіть генерувати ці коди динамічно за допомогою інструментів анімації. Але вони досить обмежені в порівнянні з повноцінною бібліотекою анімації.

    Злий CSS є новітньою бібліотекою такого роду. Це нагадує мені про ранній Animate.css, який був досить простим і рудиментарним, ще можна було б використовувати в будь-якому веб-сайті.

    Загляньте на домашню сторінку для демонстрації живих зображень разом зі списком усіх підтримуваних анімацій. На момент написання цієї статті я вважаю 24 загальних стилів анімації від слайдів до ротацій і пульсуючі / підстрибуючі ефекти.

    Багато з цих анімацій є одноразовими функціями, які використовуються для перегляду елемента (або ззовні). Це зручно для сторінок з анімаціями перегляду для перегляду, орієнтованих на певні елементи сторінки.

    Але ви також можете використовуйте це, щоб показати (або сховати) додаткові елементи сторінки як випадаючі меню, панелі пошуку, приховані форми реєстрації або що-небудь інше. Ось невеликий список анімацій, які можна вибрати з:

    • Струсити
    • Збільшення / зменшення масштабу
    • Посуньте вгору / вниз
    • Зникнути / вийти
    • Прокатка в / з
    • Відмов і поп
    • Кругове обертання в / вихід

    Всі ці стилі анімації розроблені для одного використання. Їх можна викликати кілька разів на сторінку та на елемент, але вони не повторюють анімації.

    Замість цього ви можете використовувати їх на основі кліку користувача, наведення курсору або ефекту "розмах". Вони також можуть використовуватися на кнопках CTA для пульсуючих / пульсуючих ефектів, але це вимагає функції синхронізації JavaScript.

    Погляньте на сторінку з прикладами для попереднього перегляду в реальному часі та додаткових деталей. Ви також знайдете повну документацію на основному сайті разом з репо GitHub.

    Злий CSS - це нова бібліотека, тому вона ще не має величезної кількості. Але бібліотека є стабільною і, ймовірно, буде навколо на довгі роки.