CSS-анімація давно та міцно завоювала визнання користувачів завдяки не тільки своїй простоті, але й можливостям. Використовуючи CSS-анімацію, веб-майстри додають гарну візуальну складову на свій сайт, а також привертають увагу до певних функцій веб-сайту або програми.
Прикладом такої реалізації може бути наш сайт, наприклад, коли ви натискаєте кнопку «Мені подобається», серце анімується та вибухає конфетті – це, на нашу думку, забезпечує додатковий ефект взаємодії з користувачем. Натхненням для нашого сайту стала оригінальна реалізація соціальної мережі Twitter, де використовується анімація SVG кнопки серця, коли вам подобається твіт.
Незалежно від того, для чого ви використовуєте анімацію, основним способом її реалізації є зміна різних станів об’єкта в певній послідовності. Подумайте про це, як про кінофільм: одна сцена містить безліч кадрів, де кожен кадр є окремим станом об’єкта. Зазвичай, щоб побачити безперервний рух, в одній секунді сцени має бути 24 кадри. При зміні цих кадрів, перед нашими очима постає картинка, що рухається. За цим принципом і працює анімація в CSS. Подібна форма анімації також активно використовується в ігровій індустрії (геймери називають її класичною анімацією або анімацією спрайтів).
Тепер від теорії давайте перейдемо до практики.
В сьогоднішньому уроці я розповім, як використовувати набір кадрів (спрайти) та анімувати їх за допомогою CSS стилів.
В результаті має вийти ось така анімація:
Для практичної реалізації анімації спрайтів нам потрібні три важливі речі:
@keyframes
В якості спрайту я використовую розкадрування сцени з мультфільму «Панда Кунг-Фу», в якій панда По дуже приголомшений. Я взяв сцену мультфільму у форматі .mp4
та розклав на окремі кадри у форматі .jpg
за допомогою програми Adobe After Effects. У результаті у мене вийшло 23 картинки (кадри).
Тепер, коли у вас є кожен кадр, потрібно об’єднати всі отримані кадри в один файл зображення (спрайт). У мережі Інтернет є достатньо онлайн-генераторів спрайтів, якими ви можете скористатися для цієї мети. Я використовував безкоштовний інструмент CSS Sprites Generator від компанії Toptal. Створити спрайт з безлічі картинок можна також і в програмі Adobe Photoshop CC або інших подібних графічних редакторах.
Спрайт у моєму прикладі виглядає так:
Зверніть увагу, що всі картинки йдуть горизонтально одна за одною, зліва праворуч, і без пробілів (відступів) між ними. Розташування картинок на спрайті не важливе, але від цього залежать правила, які нам потрібно писати в стилях CSS. В моєму прикладі розташування кадрів саме таке, оскільки це дозволяє значно скоротити кількість цих правил і спростити анімацію.
На даному етапі я створив порожній блок <div>
і надав йому ім’я класу block-dlya-animaciyi-spraita
.
<div class="block-dlya-animaciyi-spraita"></div>
Цей елемент <div>
діятиме як «вікно перегляду», в якому відображатиметься кожен кадр спрайту за допомогою анімації.
Для цього блоку нам потрібно додати такі основні стилі CSS: ширина, висота, фонове зображення (спрайт).
width
) блоку – повинна дорівнювати ширині одного кадру спрайту.height
) блоку – аналогічно має дорівнювати висоті одного кадру спрайту..jpg
, .png
або .svg
. У прикладі використовується .jpg
.
Ось які на першому етапі CSS стилі цього блоку:
.block-dlya-animaciyi-spraita { width: 354px; height: 200px; background-image: url("sprites-css-animation_example01.jpg"); }
Ось ми і підійшли до найголовнішого питання – як змусити статичну картинку рухатись?
Для вирішення цього завдання я використовуватиму ключові кадри (@keyframes
) CSS. З їхньою допомогою справді можна творити дива!
А тепер трохи теорії та математики.
Щоб «оживити» наш спрайт, вікно перегляду має переміщатися справа ліворуч, показуючи спочатку перший кадр, потім другий і так далі. Спочатку блок перегляду закривається першим кадром. Через деякий час нам потрібно змістити фонове зображення (спрайт) вліво, щоб з’явився наступний кадр.
З цим завданням ефективно впораються ключові кадри (@keyframes
), які анімуватимуть положення спрайту в блоці перегляду.
Нам потрібно перейти від початкового положення фонового зображення (0px
) і, зрештою, змістити спрайт вліво на всю ширину файлу зображення. У прикладі ширина одного кадру дорівнює 354px
, всього кадрів 23, відповідно загальна ширина файлу спрайту дорівнює 8148 пікселів
(354*23).
Я визначаю блок @keyframes
, який показує, які стилі слід використовувати в анімації. Ось що виходить:
@keyframes panda-kung-fu-sprite-animation { from {background-position: 0px;} to {background-position: -8148px;} // якщо вказати позитивне значення – рух кадрів спрайту буде у зворотному порядку }
Тепер нам потрібно застосувати ці ключові кадри до анімації блоку вікна перегляду.
Властивість animation
CSS описує наступні правила:
{назва ключових кадрів} {тривалість анімації в секундах} steps( {кількість кадрів} ) {загальна тривалість анімації}
Відповідно, у моєму прикладі блок вікна перегляду матиме такі значення для анімації:
.block-dlya-animaciyi-spraita { …… animation: panda-kung-fu-sprite-animation 2.3s steps(23) infinite; }
От і все! Проста анімація спрайту готова. Нижче представлений весь HTML та CSS код, а також демо сьогоднішнього прикладу:
<div class="block-dlya-animaciyi-spraita"></div> <style> .block-dlya-animaciyi-spraita { width: 354px; height: 200px; background-image: url("sprites-css-animation_example01.jpg"); animation: panda-kung-fu-sprite-animation 2.3s steps(23) infinite; } @keyframes panda-kung-fu-sprite-animation { from {background-position: 0px;} to {background-position: -8148px;} } </style>
Демо:
Переваги використання спрайтів:
.jpg
спрайту мінімум у 10 разів легший, ніж при використанні, наприклад, .gif
анімації
Оскільки в стилях ми прописуємо фіксовану висоту і ширину для області перегляду анімації <div>
, на маленьких екранах (наприклад, мобільних) спрайт може виходити за рамки екрану.
Одним із способів домогтися адаптивності тут є використання властивості transform: scale(0.5)
, щоб змінити розмір елемента наполовину для мобільних, а для великих екранів встановити масштаб рівним 1. А також використовувати функцію translate()
, щоб елемент знаходився в тому ж положенні у верхньому лівому кутку. Ось такий виходить CSS код:
<style> .block-dlya-animaciyi-spraita { …….. transform: translate(-25%, -25%) scale(0.5); } @media only screen and (min-width: 1024px) { .block-dlya-animaciyi-spraita { transform: scale(1); } } </style>
Для забезпечення максимальної підтримки різними браузерами, ви можете додати префікси браузерів до властивостей CSS стилів @keyframes
та animation
:
@-webkit-keyframes {…} @-moz-keyframes {…} @-o-keyframes {…} @keyframes {…}
та
-webkit-animation: ...; -moz-animation: ...; -o-animation: ...; animation: ...;
У сьогоднішньому уроці ми розглянули і теорію, і практику створення анімації спрайтів за допомогою лише CSS стилів. Сподіваюся, що цей урок приніс вам практичну користь, а також надихне на створення більш складного та цікавого анімованого спрайту.
У цьому уроці я використав просту графіку із мінімальною кількістю кадрів. Замість формату .jpg
спрайту ви можете використовувати .png
(або .svg
), щоб досягти прозорості об’єктів, їх багатогранності та більш складної поведінки. Візьміть сьогоднішній приклад за основу та створіть щось своє, унікальне!
Дякую, що читаєте наш блог!
В якості бонусу, нижче представлено ще 2 анімованих спрайти: мем із розгубленим Траволтою, а також танцюючий Міккі Маус.
Сьогоднішній огляд присвячений людям, для яких важливе питання конфіденційності в Інтернеті, та хто цінує свої…
Вперше про бренд Pro Plan почули у 1986 році, коли він став частиною американської компанії…
Страх покарання гірше самого покарання (Покарання — завжди щось конкретне, і воно все ж краще,…
Якщо ви плануєте розмістити веб-сайт в мережі Інтернет, дуже важливо знайти для нього швидкий і…
Навчання за кордоном вже давно асоціюється з якісною освітою, новими можливостями та безліччю перспектив. Але…
Вибір майстра для ремонту та перетяжки меблів – завдання, яке потребує вдумливого підходу. Адже від…
View Comments
I congratulate, it is simply excellent idea
Дуже корисна інформація. Дякую.