Ефекти трансформації CSS (CSShake)

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

А сьогодні розглянемо CSS «плагін» CSShake, за допомогою якого можна зробити кумедний анімований ефект трясіння елементів. Основним компонентом є властивість трансформація (transform), що працює у поєднанні з animation.

Приклад ефекту під біт)

Це лише прикол, а чи не кінцевий результат. Насправді там є вибір ефектів як невеликої тряски, так і дуже великої або зовсім налаштування вручну. Також вибір напряму: горизонтальний, вертикальний, круговий і т.д. Детальніше читаємо далі)

Підключення CSShake та використання на сайті

Все, дуже просто тим більше враховуючи, що плагін CSShake реалізований лише засобами CSS. Отже, для роботи потрібні стилі, і вказати певні класи елементам, яких потрібно не по-дитячому потрясти)

Підключення

Грубо кажучи, бібліотека підключається трьома способами, але насамперед уточню, що необов'язково інтегрувати повний набір ефектів у разі, якщо вам потрібний лише один із них. Так як спеціально на такий випадок зроблено розбивку всіх ефектів на окремі файли CSS.

1-й. Завантажити з офіційного сайту (тут) останню версію плагіна. Завантажити його на сайт і між тегами підключити до ресурсу.

2. Використовувати мережу доставки (CDN), що набагато спрощує роботу.

3-й. Третій варіант, власне, і є окремими файлами стилів. Їх можна підключати через CDN (тут весь список ) або просто скопіювати весь код та вставити у свій файл стилів сайту.

Використання

Після підключення бібліотеки CSShake будь-яким із трьох варіантів вище, потрібно до бажаного елементу сайту задати певні класи. Є три основні класи:

1-й. shake-horizontal - будь-який ефект тряски 2-й. shake-constant - запуск без перервної анімації 3-й. shake-constant - hover - зупинка анімації при наведенні на елемент

---