CSS анімація без проблем

CSS анімація - відносно нова технологія, яка буде активно розвиватися з огляду на простоти і зручності. Не всі браузери поки підтримують анімацію, проте вже є інструменти, що допомагають розробникам у створенні «живих» об'єктів на своїх сторінках.

Я не буду заглиблюватися, що таке css анімація - не про це стаття, та й інформації в мережі дуже багато. Впритул працювати з анімацією не доводилося, тому що попало розповідати теж не хочеться.

Сьогодні ж мова піде про невеликий фреймворці для роботи з css анімацією - animate.css. Чим він хороший?




+ він кросбраузерності (відносно, звичайно) і деякі проблеми сумісності вирішуються за                  допомогою скрипта Modernizr
+ він безкоштовний
+ він підтримує 56 (!) різних ефектів анімації
+ він дуже легко вбудовується в сторінку

Фреймворк поставляється у вигляді одного css файлу, який підключається як звичайно:
<link rel="stylesheet" href="animate.css">

 Після підключення залишилося тільки призначити необхідні класи елементами:
<div class="animatebox animation flash"></div>



З цих трьох класів фреймворком обробляються два - animation і flash. Перший вказує, що блок повинен бути анімованим, другий - який тип анімації потрібно застосувати.

Більше нічого не потрібно писати - все чудово заводиться і працює.
Залишився ще один момент. Вам не потрібно редагувати сам процес анімації, проте - її тривалість потрібно міняти. Дизайнер передбачив це, тому тривалість можна вказати безпосередньо в описі стилів того елемента, якій призначена анімація.
Приблизно так:
.animatebox{
width:35%;
height:200px;
-webkit-animation-duration: 3s;
-webkit-animation-delay: 2s;
-webkit-animation-iteration-count: infinite;
-moz-animation-duration: 3s;
-moz-animation-delay: 2s;
-moz-animation-iteration-count: infinite;
-o-animation-duration: 3s;
-o-animation-delay: 2s;
-o-animation-iteration-count: infinite;
-ms-animation-duration: 3s;
-ms-animation-delay: 2s;
-ms-animation-iteration-count: infinite;
 CSS файл фреймворку важить близько 75 кілобайт. Це багато, тому розробник розбив його на 56 файлів, для кожного типу анімації. Обираєте, що вам потрібно і підключаєте. Дрібниця, а приємно.