Анімація руху CSS «Санта, що біжить». Покадрова анімація CSS @keyframes

У сьогоднішньому уроці я покажу вам як можна за допомогою CSS реалізувати на сайті (в HTML документі) анімацію у вигляді об'єкта, що рухається. У нашому випадку це буде Санта Клаус (або Дід Мороз). І ось цей персонаж буде не просто ворушитися, він ще й пересуватиметься з лівої частини вікна браузера до правої.

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

Наприклад, у нас є картинка, на якій зображений Санта-Клаус. Ця картинка складається з кількох спрайтів (кадрів). І якщо ці кадри швидко змінювати один за одним, то ми отримаємо ефект персонажа, що рухається..

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

Правило @keyframes

Реалізувати анімацію ми будемо за допомогою правила CSS @keyframes. Це правило встановлює стилі ключових кадрів анімації. Тобто за допомогою правила @keyframes ми вказуємо браузеру, як саме кадри повинні змінювати один одного та інші їх стилі (ми можемо вказати прозорість, колір, положення кадру та інші параметри).

Синтаксис

@keyframes <змінна> { [ from | to | <відсотки> ] [, from | to | <відсотки> ]* }

где,

• <змінна> - це унікальна змінна, яка пов'язує @keyframes з animation, через цю властивість налаштовується час анімації та інші її параметри.
• from - перший ключовий кадр, аналогічний 0%.
• to - останній ключовий кадр, аналогічний 100%.
• <відсотки> - встановлює ключовий кадр у відсотках від часу всієї анімації.

Приклад

@keyframes myanime {
from { left: 0; }
to { left: 300px; }
}

У даному прикладі:

• myanime – ім'я анімації;
• from to - ключові слова за допомогою яких ми вказуємо як змінюватиметься значення властивості left (від 0 до 300px).

Замість ключових слів from to можна використати відсотки. Наприклад, 0% и 100%.

Анімація руху CSS на реальному прикладі

See the Pen Анимация движения CSS «Бегущий Санта» by Дмитрий (@lubny2011) on CodePen.

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

Крок 1. Перше, що нам потрібно – це створити окрему папку для нашого проекту. Назвемо її Run Santa.

Крок 2. Далі в папці Run Santa створимо ще одну папку css (у ній зберігатиметься файл зі стилями), папку img (у ній буде картинка із зображенням Санти) і файл index.htm (це буде наш веб-документ, при запуску якого на екрані в браузері з'явиться Санта, що біжить).

Крок 3. В папці css створимо файл style.css. Тут ми трохи пізніше пропишемо стилі (правила) нашої анімації.

Крок 4. Тепер нам потрібно знайти потрібну картинку зі спрайтами. Відкриваємо пошукову систему Google і водимо запит «sprite sheet Santa» («або спрайт Санта»). Переходимо в розділ картинки і знаходимо підходящу для наших цілей спрайт анімацію. Зберігаємо цю картинку в папку img.

Крок 5. Тепер давайте відкриємо файл index.html будь-яким текстовим редактором і напишемо в ньому наступний код:

<div class="sprite-container">
<div class="sprite-image"></div>
</div>

Тут ми спочатку створюємо контейнер для анімації <div class="sprite-container"></div> і поміщаємо в цей контейнер нашу картинку.

За допомогою блоку <div class="sprite-image"></div> ми будемо виводити у браузері картинку.

Крок 6. Тепер давайте перейдемо в папку CSS і відкриємо будь-яким текстовим редактором файл style.css.

Крок 7. У цьому файлі прописуємо наступний код:

.sprite-container {
    height: 100vh; /*100% висоти екрану*/
    display: flex;
    align-items: center; /*щоб картинка була по центру*/
}

.sprite-image {
    height: 105px; /*высота спрайта (висота одного кадру)*/
    width: 100px; /*ширина спрайта (ширина одного кадру)*/
    background: url(https://d-nik.pro/images/stories/santa.jpg) 0px 0px; /*картинка зі спрайтами з позицією у верхньому лівому кутку (0px 0px)*/
    animation: play 0.8s steps(6) infinite, /*анімація називається play, швидкість анімації 0.8s, потрібно зробити 6 кроків (6 кадрів), анімація відбувається безперервно (зациклено) - infinite*/
        step 15s linear infinite; /*ще одна анімація, тривалістю 15s, лінійний, зациклений*/
    position: absolute; 
    left: 0;
}

@keyframes play {
    100% {
        background-position: -600px; /*ширина картинки зі спрайтами*/
    }
}

@keyframes step {
    100% {
        left: 100%; /*пересування вліво до кінця*/
    }
}

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

Як зробити анімацію в CSS. Відео