Анімація за допомогою Animate.css

Візуальний інструмент для створення різних анімаційних ефектів на сайтах за допомогою CSS.
Використовуються: крос-браузерна бібліотека CSS-анімації (Animate.css) і скрипт, що спрацьовує при прокручуванні сторінки (WOW.js).
Виберіть потрібний вам ефект анімації і надайте стиль до того елемента на HTML сторінці, який ви хочете анімувати (оживити). Ви можете анімувати будь-яку кількість (в розумних межах) елементів HTML.
стиль для початкового екрану задається для видимих елементів при завантаженні сторінки. Стилі при прокручуванні для елементів, які повинні бути анімовані при прокручуванні. За допомогою CSS тепер ви можете додати фантастичну анімацію до свого проекту, нижче ви знайдете 36 різних прикладів анімації з чистим кодом CSS. Весь код знаходиться в одному файлі CSS, який можна завантажити за посиланням нижче. Завдяки Даніелу Едену CSS генератор ефектів онлайн

Бібліотека Animate.css (Приклад)

Бібліотека Animate.css, як не важко здогадатися з назви допомагає привласнювати елементам анімацію. Вона складається всього з одного файлу css. При належній вправності його не важко відтворити самому. Animate.css надає заздалегідь приготовані класи для анімації, якими можна користуватися за принципом Bootstrap. В першу чергу бібліотека потрібна для дуже швидкої верстки, в основному для односторінкових додатків. Сама бібліотека доступна за посиланням: Animate.css.

Для роботи досить додати посилання на файл.

<link rel="stylesheet" href="animate.min.css">

Анімувати блок просто, достатньо присвоїти йому обов'язковий клас animated. Яку саме анімацію матиме блок визначають додаткові назви класів. infinite робить анімацію нескінченною, а bounce привласнює ефект підстрибування, як в наступному прикладі:

АНІМАЦІЯ #bounce

<h1 class="animated infinite bounce">Приклад</h1>

АНІМАЦІЯ #1

<h1 class="animated infinite fadeIn">АНІМАЦІЯ #1</h1>

АНІМАЦІЯ #2

<h1 class="animated infinite  slideInLeft">АНІМАЦІЯ #2</h1>

АНІМАЦІЯ #3

<h1 class="animated infinite  zoomIn">АНІМАЦІЯ #3</h1>

АНІМАЦІЯ #4

<h1 class="animated infinite  jackInTheBox">АНІМАЦІЯ #4</h1>

Animate.css

Анімація від Daniel Eden.

ДАТИ

ДАТИ