Натхнення: 10 прикладів анімації на чистому CSS CodePen

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

Давайте подивимося, які дивовижні речі люди роблять і анімують лише за допомогою HTML та CSS.

В даній анімації дуже багато чого відбувається, що важко повірити, що це просто HTML та CSS! Поворотні анімації та багаторазові, багатошарові рухи поєднуються, щоб зробити вигляд, що цей велосипедист і його велосипед зроблені з желе. Також використовується методолгія BEM для іменувань класів!

See the Pen
Pure CSS Biker #weeklycssimages
by Julia Muzafarova (@miocene)
on CodePen.

Об’єднуючи багато рухомих частин, можна зробити простий набір елементів HTML схожим на більш складну анімацію. Подивіться, як взаємодіють дві планети, в той час як циклічні «частинки» просто розкидані, щоб здатися випадковими.

See the Pen
Pure CSS Saturn Hula Hooping
by Jamie Coulter (@jcoulterdesign)
on CodePen.

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

See the Pen
color layers css animation
by Nooray Yemon (@yemon)
on CodePen.

Нам не завжди потрібні формати JPG або PNG, щоб зробити красиві зображення, і це ще один приклад. Один контейнер div та чотири вкладених – це все, що потрібно для того, щоб зробити це чудовим зображення для лоадера. Отриманий код є значно менший, ніж анімована картинка GIF.

See the Pen
Icecream loader
by Matheus Verissimo (@astrixsz)
on CodePen.

Коли ви поєднуєте художнє використання HTML-елементів з деякою символьною анімацією, то результат не примушує нікого чекати. Дивовижно гладка анімація, сповнена веселощів. Велика повага до Юлії Музафарової за те, що створити дану анімацію було дуже нелегко.

See the Pen
Pure CSS Pigeons #weeklycssimages
by Julia Muzafarova (@miocene)
on CodePen.

Об’єднуючи безліч простих елементів HTML з купою тонких, веселих анімацій, цей сонний кіт має дуже різноманітний характеру. Цей приклад використовує препроцесор Sass і змінні для керування анімацією. Спробуйте змінити деякі, щоб побачити, що відбувається!

See the Pen
Sleeping Cat CSS drawing/animation
by Anastasia Goodwin (@agoodwin)
on CodePen.

Плавна анімація може бути досягнута при використанні HTML і CSS, особливо коли ми дотримуємося деяких основних принципів. Ця анімація зводить до мінімуму кількість елементів і використання великої кількості трансформацій.

See the Pen
Black bear
by Aakash Gill (@aakash_gill)
on CodePen.

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

See the Pen
Pure CSS Sponge #weeklycssimages
by Julia Muzafarova (@miocene)
on CodePen.

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

See the Pen
Pure CSS Checkbox Mail #CodePenChallenge 📬✍️🤓
by Jhey (@jh3y)
on CodePen.

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

See the Pen
Car preloader
by igor0ser (@igor0ser)
on CodePen.

Дякуємо, як завжди, CodePen і творчим людям, що стоять за цими демонстраціями; вони, безумовно, надали нам багато натхнення в цих прикладах анімації.

Також, вас може зацікавити урок по розробці анімації мильних бульбашок, як на сайті газовоної води 7UP.

Перекладач: Гронюк Владислав
Автор: Donovan Hutchinson
Посилання на оригінал: https://webdesign.tutsplus.com/articles/pure-css-animation-inspiration-on-codepen–cms-30875

Сподобався урок? Поділись з друзями!

Вам також може сподобатись

Залишити відповідь

Ваша e-mail адреса не оприлюднюватиметься. Обов’язкові поля позначені *

Повідомити про помилку

Текст, який буде надіслано нашим редакторам: