15 надихаючих прикладів CSS-анімації на CodePen

CodePen швидко стає місцем демонстрації наших можливостей в веб-творчості.  Ось список деяких чудових речей, недавно створених за допомогою анімації CSS!

1. Годинники JavaScript Mickey

Apple watch like Mickey watch by Jay Salvat (@jaysalvat).

Це прекрасний приклад об'єднання CSS-переходів, графіки SVG і JavaScript для промальовування рук Mickey Mouse на циферблаті.

2. CSS Submarine

Submarine with CSS by Alberto Jerez (@ajerez).

Чудовий ілюмінатор в цьому закругленими контейнері CSS-animated субмарини надає їй шарм.

3. ASCII AT-AT

AT-AT by Tim Pietrusky (@TimPietrusky).

Натхненний Зоряними війнами персонаж AT-AT намальований у вигляді кольорового мерехтливого тексту в CSS. Кльовий ефект.

4. SVG / CSS Loader

Loader SVG/CSS by Bidji (@Bidji).

Цей завантажувач використовує кольори, що змінюються, щоб створити враження обертання.

5. 3D CSS Tardis

3D CSS Tardis by Gerwin van Royen (@Gerwinnz).

CSS можна використовувати для створення приголомшливих 3D-ефектів. Такий 3D tardis:

6. Dozing Bird

Dozing Bird by Peter Klein (@pmk).

Простий художній стиль і точна анімація надають цій сонної птиці ілюзію життя.

7. Pure CSS border animation

Pure CSS border animation without SVG by Rplus (@rplus).

Просте, але дуже ефективне використання кордонів CSS для створення анімації в стилі завантаження.

8. Star Wars: The Force Awakens

Star Wars: The Force Awakens in CSS by Donovan Hutchinson (@donovanh).

Назва майбутнього фільму про Зоряних війнах, створеного з використанням CSS, HTML і невеликого JavaScript.

9. 3D Synth

Pure CSS 3D Synthesizer (mousedown for rotation) by Nikolay Talanov (@suez).

Знайдіть ключі і обертайте цей 3D-синтезатор, створений за допомогою CSS. Дивовижна робота:

10. Cascading Solar System

Cascading Solar System! by Tady Walsh (@tadywankenobi).

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

11. 3D Solar System

Full CSS 3D Solar System by Wayne Dunkley (@waynedunkley).

Інша сонячна система, але на цей раз в 3D. Красиве використання затінення.

12. Flat Design Camera

Flat design camera with CSS animation by Damien Pereira Morberto (@damienpm).

Натисніть кнопку спуску затвора на цій камері, щоб побачити, як вона фотографує в анімації CSS.

13. Day and Night Transition

Day Night simulation by Szymon Stypa (@Catagen).

Натисніть кнопку, щоб побачити перехід з дня в ніч.

14. Animated Sprite with CSS

Animate sprite with CSS by Avaz Bokiev (@samarkandiy).

Демонстрація того, як низка картинок (спрайт) створює анімацію зупинки пересування разом з рухом вперед і назад.

15. Dodecahedron

Dodecahedron by wontem (@wontem).

Тонкий, гарний додекаедр, створений і повністю анімований за допомогою CSS.

Висновок

Не так давно ми спиралися на інструменти Flash або JavaScript для будь-якої анімації в браузері. Сучасні браузери забезпечили кращу підтримку CSS, з апаратним прискоренням 3D і анімацією.

Завдяки таким сайтам, як CodePen, ми можемо обмінюватися і вчитися легше, ніж будь-коли раніше. Які з побачених недавно демо-роликів надихнули вас найбільше?