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

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

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

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

анімація руху css

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

Правило @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. Відео

АВТОРИЗАЦІЯ