Ми зібрали для вас добірку кращих прикладів JQuery анімації та CSS3. Ви можете переглянути вихідний код, щоб зрозуміти, як анимируется кожен з прикладів.

Працюють годинник на основі CSS3

Працюють годинник на CSS3, у прикладі використовується анімація і фігури CSS, без зображень або JavaScript:

Демо-версія Завантажити

Анімовані хмари на CSS3

У даному прикладі використовується тільки анімація CSS3:

50+ прикладів Jquery / CSS3 анімації, схожою на флеш

Демо-версія Завантажити

Анімовані іконки погоди на CSS3

50+ прикладів Jquery / CSS3 анімації, схожою на флеш

Демо-версія Завантажити

Анімації завантаження на CSS3

Кілька експериментів з індикаторами завантаження на основі CSS3 без JQuery анімації появи. Отримуйте задоволення і не забудьте поділитися тим, що ви дізнаєтеся:

50+ прикладів Jquery / CSS3 анімації, схожою на флеш

Демо-версія Завантажити

3D обертається планета на основі CSS3

Відмінна ідея і поєднання двох концепцій. А трохи доопрацювавши масштабування і анімацію, можна дивовижний результат!

50+ прикладів Jquery / CSS3 анімації, схожою на флеш

Демо-версія Завантажити

Ефект анімації тексту

50+ прикладів Jquery / CSS3 анімації, схожою на флеш

Демо-версія Завантажити

Анімована 3D діаграма

3D діаграма, створена за допомогою HTML і CSS3-перетворень. Тіні створені з допомогою градієнтів CSS, анімація — з допомогою переходів. AngularJS використовується для оновлення даних:

50+ прикладів Jquery / CSS3 анімації, схожою на флеш

Демо-версія Завантажити

JQuery ефект снігу

50+ прикладів Jquery / CSS3 анімації, схожою на флеш

Демо-версія Завантажити

CSS3-анімації завантаження

50+ прикладів Jquery / CSS3 анімації, схожою на флеш

Демо-версія Завантажити

Анімована іконка гамбургер-меню на CSS3

50+ прикладів Jquery / CSS3 анімації, схожою на флеш

Демо-версія Завантажити

AT-AT (крокуючий броньовик з Зоряних війн) на CSS3

Приклад, який я створив на CSS3. Можна було б, звичайно, зменшити кількість div, використаних для створення частин тіла. Також варто було б оптимізувати приклад і додати клас JQuery з анімацією:

50+ прикладів Jquery / CSS3 анімації, схожою на флеш

Демо-версія Завантажити

Gran Turismo

50+ прикладів Jquery / CSS3 анімації, схожою на флеш

Демо-версія Завантажити

3D Сонячна система

50+ прикладів Jquery / CSS3 анімації, схожою на флеш

Демо-версія Завантажити

Анімація диму

Це CSS3-версія анімації. Клуби диму створюються без зображень, а анімація задається без використання JavaScript і JQuery ефектів анімації:

50+ прикладів Jquery / CSS3 анімації, схожою на флеш

Демо-версія Завантажити

Анімований логотип

50+ прикладів Jquery / CSS3 анімації, схожою на флеш

Демо-версія Завантажити

IE10 3D куб

50+ прикладів Jquery / CSS3 анімації, схожою на флеш

Демо-версія Завантажити

Анімація мов полум’я на основі CSS3

50+ прикладів Jquery / CSS3 анімації, схожою на флеш

Демо-версія Завантажити

Логотип Бетмена на -webkit — CSS3 анімація

50+ прикладів Jquery / CSS3 анімації, схожою на флеш

Демо-версія Завантажити

Концепт дизайну погодного додатки на основі CSS

50+ прикладів Jquery / CSS3 анімації, схожою на флеш

Демо-версія Завантажити

Анімація природи на CSS3

50+ прикладів Jquery / CSS3 анімації, схожою на флеш

Демо-версія Завантажити

Кіт гуляє (цикл без JQuery анімації)

50+ прикладів Jquery / CSS3 анімації, схожою на флеш

Демо-версія Завантажити

3D-термінал на CSS3

50+ прикладів Jquery / CSS3 анімації, схожою на флеш

Демо-версія Завантажити

Анімований графік на CSS3

Лінійний графік на HTML і CSS3. При наведенні курсору миші на розділ відображається його назва. Дані заповнюються і оновлюються з допомогою AngularJS. Перетворення обертання вручну застосоване до точок графіка, анімація задається з допомогою переходів CSS3:

50+ прикладів Jquery / CSS3 анімації, схожою на флеш

Демо-версія Завантажити

Обертові 3D HTML-форми з допомогою CSS3

50+ прикладів Jquery / CSS3 анімації, схожою на флеш

Демо-версія Завантажити

Анімації підключення індикатора на основі CSS3

50+ прикладів Jquery / CSS3 анімації, схожою на флеш

Демо-версія Завантажити

Steps-анімація на Jquery

Анімації JQuery приклад, що ілюструє функцію таймінгу анімації: steps() в поєднанні з листом спрайтів:

50+ прикладів Jquery / CSS3 анімації, схожою на флеш

Завантажити / Додаткова інформація

Просунута анімація траєкторії

Анімація з застосуванням SVG, яка може стати в нагоді при розробці анімації траєкторії:

50+ прикладів Jquery / CSS3 анімації, схожою на флеш

Завантажити / Додаткова інформація

Анімації з використанням прокручування wow.js

50+ прикладів Jquery / CSS3 анімації, схожою на флеш

Завантажити / Додаткова інформація

Анімація з використанням аркушів спрайтів на CSS

Нижче наведено приклад з використанням аркушів спрайтів з поясненнями без JQuery ефектів анімації:

50+ прикладів Jquery / CSS3 анімації, схожою на флеш

Завантажити / Додаткова інформація

Анімований логотип для Herr Brueckers

50+ прикладів Jquery / CSS3 анімації, схожою на флеш

Завантажити / Додаткова інформація

Анімація малювання контуру

50+ прикладів Jquery / CSS3 анімації, схожою на флеш

Завантажити / Додаткова інформація

Нескінченна анімація галереї на основі анімації блоку JQuery

50+ прикладів Jquery / CSS3 анімації, схожою на флеш

Завантажити / Додаткова інформація

Анімовані кола з використанням CSS / SVG

50+ прикладів Jquery / CSS3 анімації, схожою на флеш

Завантажити / Додаткова інформація

SVG-анімація з допомогою CSS

Приклад того, як анімувати SVG. Для демонстраційних цілей я використовував іконки «Small Icons» Ніка Фроста і Грега Лапена:

50+ прикладів Jquery / CSS3 анімації, схожою на флеш

Завантажити / Додаткова інформація

CSS3 паралакс анімація бойових винищувачів від MySkins Studio

Це ще одна CSS3 анімація, створена з використанням паралакса CSS3 і кейфреймов, але без JQuery анімації:

50+ прикладів Jquery / CSS3 анімації, схожою на флеш

Завантажити / Додаткова інформація

Анімований SVG-логотип

50+ прикладів Jquery / CSS3 анімації, схожою на флеш

Завантажити / Додаткова інформація

Плоска анімована кругова іконка на основі CSS3

50+ прикладів Jquery / CSS3 анімації, схожою на флеш

Завантажити / Додаткова інформація

Анімація з setTimeout

Невеликий приклад синхронізації анімації, в якій навколо екрану переміщається куля, з допомогою setTimeout:

50+ прикладів Jquery / CSS3 анімації, схожою на флеш

Завантажити / Додаткова інформація

SVG-анімація сонця з використанням CSS

50+ прикладів Jquery / CSS3 анімації, схожою на флеш

Завантажити / Додаткова інформація

JQuery-анімація

Проста JQuery анімація:

50+ прикладів Jquery / CSS3 анімації, схожою на флеш

Завантажити / Додаткова інформація

CSS-анімація орбіти Землі

50+ прикладів Jquery / CSS3 анімації, схожою на флеш

Завантажити / Додаткова інформація

Анімація птаха, що летить на CSS3

50+ прикладів Jquery / CSS3 анімації, схожою на флеш

Завантажити / Додаткова інформація

Анімація атома на основі CSS3

50+ прикладів Jquery / CSS3 анімації, схожою на флеш

Завантажити / Додаткова інформація

3D-анімація годин з використанням JS

У процесі розробки використовувалися 3D-ефекти CSS3 і JQuery анімація тексту. Приклад працює в Google Chrome 28.0 і Firefox 22.0. У той же час анімація не працює в IE 10 з-за якоїсь помилки доступу JQuery, яку я не спромігся виправити:

50+ прикладів Jquery / CSS3 анімації, схожою на флеш

Завантажити / Додаткова інформація

Анімоване Лондонське оглядове колесо з двох елементів

50+ прикладів Jquery / CSS3 анімації, схожою на флеш

Завантажити / Додаткова інформація

Анімація Drag Race

Анімація гонок на чистому CSS / HTML:

50+ прикладів Jquery / CSS3 анімації, схожою на флеш

Завантажити / Додаткова інформація

Анімований святковий торт

50+ прикладів Jquery / CSS3 анімації, схожою на флеш

Завантажити / Додаткова інформація

Анімований логотип

Цей анімований логотип без JQuery ефектів анімації виглядає дуже елегантно:

50+ прикладів Jquery / CSS3 анімації, схожою на флеш

Завантажити / Додаткова інформація

Анімований логотип компанії на основі CSS3

Анімований логотип компанії на чистому HTML / CSS3:

50+ прикладів Jquery / CSS3 анімації, схожою на флеш

Завантажити / Додаткова інформація

Анімована іконка камери

50+ прикладів Jquery / CSS3 анімації, схожою на флеш

Завантажити / Додаткова інформація

Анімація помаранчевого автомобіля

50+ прикладів Jquery / CSS3 анімації, схожою на флеш

Завантажити / Додаткова інформація

Анімована іконка Wi-Fi

50+ прикладів Jquery / CSS3 анімації, схожою на флеш

Завантажити / Додаткова інформація

Анімовані адаптивні CSS — іконки погоди

Це невеликий набір анімованих ікон погоди на CSS. Зверніть увагу, що більша частина анімації створюється з допомогою псевдо-елементів та JQuery анімації:

50+ прикладів Jquery / CSS3 анімації, схожою на флеш

Завантажити / Додаткова інформація

Анімований віджет панелі інструментів

50+ прикладів Jquery / CSS3 анімації, схожою на флеш

Завантажити / Додаткова інформація

Анімована банку Pepsi на основі CSS3

50+ прикладів Jquery / CSS3 анімації, схожою на флеш

Завантажити / Додаткова інформація

Анімований акваріум з рибкою на CSS3

50+ прикладів Jquery / CSS3 анімації, схожою на флеш

Завантажити / Додаткова інформація

Анімація простих 3D-фігур на чистому CSS

Набір простих 3D-фігур, анімованих на чистому CSS3 без JQuery ефектів анімації. Пізніше я додам інші фігури:

50+ прикладів Jquery / CSS3 анімації, схожою на флеш

Завантажити / Додаткова інформація

Анімована сторінка «Скоро у продажу»

Цей заповнювач для сторінки «Скоро у продажу» був розроблений для одного з клієнтів. Пізніше вирішили додати «родзинку» для відвідувачів з сучасними браузерами:

50+ прикладів Jquery / CSS3 анімації, схожою на флеш

Завантажити / Додаткова інформація

Анімація танцюючої дівчинки

Дуже мила анімація танцюючої дівчинки створена з використанням CSS3 і без JQuery анімації! Всі рухи тіла дівчинки створені з використанням основних фігур CSS і деяких додаткових властивостей, таких як borders, shadows, gradients і т. д.:

50+ прикладів Jquery / CSS3 анімації, схожою на флеш

Завантажити / Додаткова інформація

Анімований логотип Windows 8 на CSS3

Анімований логотип Windows 8, розроблений за 5 хвилин з допомогою CSS3. Він створюється з допомогою перетворення перспективи CSS3, яке потім анимируется властивостями анімації і кейфреймами:

50+ прикладів Jquery / CSS3 анімації, схожою на флеш

Завантажити / Додаткова інформація

Анімований логотип з «Посмішкою людиною»

Усміхнений людина — це відомий хакер з аніме «Привид в обладунках: Синдром одинака«. Він розміщував анімований логотип зі своїм обличчям, зламуючи киберсистемы:

50+ прикладів Jquery / CSS3 анімації, схожою на флеш

Завантажити / Додаткова інформація

Анімовані шестерні на CSS3 і JQuery ефекти анімації

50+ прикладів Jquery / CSS3 анімації, схожою на флеш

Завантажити / Додаткова інформація

Анімація виклику Skype

Моя спроба відтворити анімацію виклику в мобільному додатку Skype (яку я бачив на своєму iPad) з допомогою CSS:

50+ прикладів Jquery / CSS3 анімації, схожою на флеш

Завантажити / Додаткова інформація

Анімація птаха, що летить — один елемент CSS

50+ прикладів Jquery / CSS3 анімації, схожою на флеш

Завантажити / Додаткова інформація

HTML5 Canvas анімація трави

50+ прикладів Jquery / CSS3 анімації, схожою на флеш

Завантажити / Додаткова інформація

Анімація фенакистископа на CSS3

50+ прикладів Jquery / CSS3 анімації, схожою на флеш

Завантажити / Додаткова інформація

Переклад статті «50+ JQUERY CSS3 ANIMATION EXAMPLES LIKE FLASH ANIMATION» був підготовлений дружною командою проекту Сайтостроение від А до Я.

ОСТАВЬТЕ ОТВЕТ

Please enter your comment!
Please enter your name here