20 кращих CSS анімацій на CodeCanyon

В інтернет-історії був час, коли для додавання ефекту анімації, крім GIF, не можна було обійтися без Flash. Сегодня мы находим, что Flash отмер и такие вещи, как CSS3 и HTML5 привносят в Интернет фантастические анимации и эффекты.

Якщо для вашого сайту або веб-проекту потрібні блискучі CSS animations, ось список з 20 кращих анімацій CSS на CodeCanyon:

1. Aero - CSS3 Hover Effects

Додайте hover-ефекти затінених скла за допомогою Aero - CSS3 Hover Effects.

Він повністю чуйний і простий у використанні, ви знайдете:

• заміну кольорів і перемикання з кола на квадрат
• сумісність з браузерами, навіть з Microsoft Edge
• сумісний з SASS
• настройка CzS
• та інше!

Завдяки 10 ефектів, включеним в реліз і появи більшої кількості ефектів, Aero - CSS3 Hover Effects - приємний набір анімацій CSS з ефектом наведення.

2. MegaHover Mouse Over Effects

MegaHover Mouse Over Effects пропонує потужну партію hover-ефектів CSS3, сумісних з Bootstrap 3.

Він має:

• іконки Font Awesome
• повну сумісність з браузерами
• чуйність
• та інше

З легкістю вставляйте і моделюйте MegaHover Mouse Over Effects.

3. Animatia - CSS Image Hover Effects

Легкий, швидкий в установці та налаштування? Такий Animatia - CSS Image Hover Effects.

Пакет CSS включає:

• більше 115 hover-ефектів з настройками
• легкі в роботі і чуйні файли
• чисті CSS3 та іконки Font Awesome
• та інше

Використовуйте Animatia - CSS Image Hover Effects для стилів кнопок, ефектів накладення, титрів і інших анімацій CSS.

4. Hover Effects Framework

Hover Effects Framework - блискуче рішення CSS анімації.

Чистий код, чуйність і:

• IcoMoon Ultimate Font
• 4 форми та 5 кольорів
• більше 50 анімацій
• та інше

У Hover Effects Framework чистий код, і, найголовніше, він містить безліч прикладів для початку роботи з красивими анімаціями CSS.

5. Collection of Preloaders

Після Collection of Preloaders вам не знадобиться ніяка інша колекція.

Ви отримаєте:

• документацію для простого налаштування
  
• легкий і гнучкий набір анімацій CSS3
• 27 унікальних preloaders

Повністю мобільна, Collection of Preloaders - відмінне доповнення до набору CSS3.

6. CSS3 Image Hover Effects

Якщо ви бачили одну анімацію CSS з ефектом hover, інших вам не треба, так?

Не зовсім.

CSS3 Image Hover Effects володіє деякими виключно приємними ефектами.

Він має

• 22 різних CSS3 hover-ефекту
• приголомшливий і чуйний
• чистий код CSS3
• та інше

Перевірте сумісний з Bootstrap CSS3 Image Hover Effects.

7. Image Hover CSS Library

Image Hover CSS Library - це масштабована, легка бібліотека анімацій CSS, яку варто подивитися.

Це класна колекція з 58 hover ефектів, зменшена до 25 КБ.

• працює з усім контентом hover
• особливі hover ефекти
• легко використовувати
• та інше

Важко виділитися серед CSS-анімації зображень, але Image Hover CSS Library зробила це.

8. SVG Logo Scroll Animation | CSS3 and Javascript

Приємно відволіктися від звичайних CSS-анімації і поглянути на щось подібне до SVG Logo Scroll Animation | CSS3 and Javascript.

Менш, ніж в 4k помістилося кілька красивих сторінок SVG-анімацій.

Прикрашайте сторінки анімаціями з SVG Logo Scroll Animation | CSS3 and Javascript.

9. Viavi CSS3 Scroll Effects

Viavi CSS3 Scroll Effects - це дійсно гарне CSS3-scroll анімаційне рішення.

Його деякі опції:

• 16 CSS 3 ефектів прокрутки
• проста реалізація
• чуйність
• та інше

З сіткою і сенсорною панеллю, Viavi CSS3 Scroll Effects не тільки добре виглядає, але і зроблений відмінно.

10. CSS3 Spinners & Loaders

Потрібні завантажувачі без gifs?

Немає проблем. Є CSS3 Spinners & Loaders.

• більше 25 варіантів
• простота настройки
• легко розширюється

CSS3 Spinners & Loaders добре документований і є повним рішенням для CSS для spinners і завантажувачів.

11. Midix - CSS3 Animation Effects without jQuery

З чистим CSS3, ефекти Midix - CSS3 Animation Effects without jQuery міцний набір з 16 анімацій CSS.

Ви отримаєте:

• швидкість анімації
• паузи анімації
• кольору іконок

Разом з Midix - CSS3 Animation Effects without jQuery ви отримаєте не тільки CSS анімації, але і безкоштовні оновлення і дружню підтримку.

12. CSS3 Hover Effects

CSS3 Hover Effects - ще одна відмінна опція.

Ви можете легко змінити:

• колір
• розміри кордонів
• коло на квадрат
• прогалини між блоками тексту

Завдяки 479 retina-піктограм і 20 різних ефектів, CSS3 Hover Effects - відмінний ресурс для використання.

13. VSPreloader - Ultimate CSS Animated Preloaders

Серед інших подібних, VSPreloader - Ultimate CSS Animated Preloaders - одне з найбільш унікальних і привабливих рішень.

Опції:

• 60 помічників
• 40 подань
• 30 анімацій
• палітра кольорів

це неймовірно яскраво і унікально.

Придивіться до VSPreloader - Ultimate CSS Animated Preloaders. Думаю, ви будете вражені.

14. Heed - Pure CSS3 Animation Effects

У Heed - Pure CSS3 Animation Effects є все необхідне для CSS анімацій.

Його легко встановити, відредагувати і налаштувати за допомогою SCSS (файл всередині).

• 20-х варіантів дизайну кольору матеріалу
• Font Awesome іконки
• 15 ефектів
• та інше

Heed - Pure CSS3 Animation Effects сумісний з retina, має підтримку і безкоштовні оновлення.

15. Ayan - CSS3 Link Hover Effects

Коли більшість анімацій CSS зосереджено на зображеннях і ефекти сторінки, Ayan - CSS3 Link Hover Effects просуває вражаючу лінійку hover-ефектів.

Ви знайдете 30 чудових CSS3 hover-ефектів та:

• сумісність з браузерами
• допоміжна документація
• модні анімації
• та інше

У пакеті Ayan - CSS3 Link Hover Effects креативні, точні, приємні анімації CSS, без зайвої нав'язливості.

16. Sinister - Pure CSS Image Hover Effects

Sinister - Pure CSS Image Hover Effects, з більш ніж 100 hover-ефектами, забезпечує значну кількість добре продуманих рішень.

Він включає більше:

• 22 ефектів переходу
• 18 ефектів переходу накладення
• 23 ефекту переходу кнопки
• 100 hover-ефектів

Без JavaScript або jQuery, тільки на CSS, Sinister - Pure CSS Image Hover Effects представляє:

• зменшення і збільшення
• переміщення по осі X і У
• повороти вправо і вліво
• масштабування і нахили
• кубічний перехід
• накладення шару
• та інше

17. Stylish Social Media Animated Icons Style

Додайте кілька приємних анімацій CSS іконка соціальних мереж зі Stylish Social Media Animated Icons Style.

З чистим дизайном і дев'ятьма стилями на вибір вам сподобається:

• проста установка і настройка
• надійність коду і документація
• незалежність від зображення або значка
• сумісність з браузерами
• та інше

Stylish Social Media Animated Icons Style додасть кольорів і CSS-анімації лінійці значків соціальних мереж.

18. CSS3 Animations

Проста анімація ваших div, p, і body HTML з CSS3 Animations.

Це хороша вставка, яку можна застосовувати в багатьох різних дизайнерських ситуаціях.

Опції включають:

• простоту у використанні і налаштуванні
• CSS3, без JavaScript
• 10+ анімацій

Бажаєте CSS3 Animations в свій дизайнерський набір?

19. Pure CSS3 Image Accordion

Створіть власну настройку слайдера з допомогою Pure CSS3 Image Accordion для симпатичних анімацій CSS.

Це:

• повна чуйність
• без фіксованої ширини
• чотири варіанти підпису
• легка настройка

Створюйте мелодійні образи за допомогою Pure CSS3 Image Accordion.

20. CSS3 Mega Tooltip Animation Pack

Приїлися звичайні tooltips?

Додайте трохи магії анімацій CSS з CSS3 Mega Tooltip Animation Pack.

Цей CSS пакет анімацій містить:

• 10 ефектів анімації
• 8 палітр кольорів
• документацію
• та інше

CSS3 Mega Tooltip Animation Pack доступний в Internet Explorer.

Висновок

Навіть серед великого числа анімацій CSS на Envato Market ви не знайшли те, що хотіли.

Немає проблем. Можете зробити самі!

Дивіться Envato eBooks, начебто Mastering CSS3, беріть один з code courses або шукайте і дотримуйтесь уроків CSS3 Code Tutorial.