Як зробити красиві анімації на css3 швидко, використовуючи бібліотеку animate.css.

Відео: Уроки по CSS / CSS3. Частина 19. Анімація (animation)

Всім привіт! Сьогодні ми поговоримо про те, як зробити красиві анімації на CSS3 дуже швидко, використовуючи бібліотеку Animate.css.

Перейдіть на офіційний сайт і подивіться, які анімації ви зможете зробити, просто вибравши будь-яку зі списку зліва і натиснувши Animate it.

Тепер скачайте бібліотеку, натиснувши Download Animate.css нижче.

Підключіть дану бібліотеку до вашої сторінці

Відео: Animate.CSS + анімація при прокручуванні

rel="Stylesheet"href="Animate.css"gt;

Створіть блок з class = box

Відео Анімації в CSS 3. Transition, animation, keyframes

class="Box"gt;

Задамо йому якісь базові стилі

.box { 
 background: cornflowerblue- 
 height:100px- 
 width:100px- 
 margin:50pxauto- 
}

Тепер, якщо ви хочете додати анімацію до блоку, то просто допишіть клас з назвою анімації.

class="Box animated fadeIn"gt;

Ось так просто ви можете додати анімацію до будь-якого потрібного вам елементу.

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

Також, ви можете використовувати jаvascript, щоб додати подій, наприклад. Щоб скоротити код, я буду використовувати JQuery, але, ясна річ, використовувати цілу бібліотеку заради того, щоб повісити кілька подій, також не найкраща справа.

Відео: Easy CSS3 Animations With Animate.css

href=""class="Link"gt;натисніть

Ось так просто ви можете робити красиві анімації на сайті, використовуючи вже готову бібліотеку Animate.css.

Дякую за увагу і удачі!

Поділися в соціальних мережах:

Схожі